\").appendTo($popupContent), Box, {\r\n direction: \"row\",\r\n crossAlign: \"stretch\",\r\n items: this._getBoxItems(),\r\n itemTemplate: function(data, i, element) {\r\n var $container = $(\"
\");\r\n switch (data.name) {\r\n case \"calendar\":\r\n $container.append(this._widget.$element());\r\n if (this._isShrinkView()) {\r\n this._timeView.$element().addClass(DATEBOX_TIMEVIEW_SIDE_CLASS);\r\n $container.append(this._timeView.$element())\r\n }\r\n break;\r\n case \"time\":\r\n $container.append(this._timeView.$element());\r\n $(element).addClass(DATEBOX_TIMEVIEW_SIDE_CLASS)\r\n }\r\n return $container\r\n }.bind(this)\r\n });\r\n this._attachTabHandler()\r\n },\r\n popupConfig: function(_popupConfig) {\r\n var calendarPopupConfig = this.callBase(_popupConfig);\r\n return extend(calendarPopupConfig, {\r\n width: \"auto\"\r\n })\r\n },\r\n getFirstPopupElement: function() {\r\n return this._timeView._hourBox.$element().find(\"input\")\r\n },\r\n _attachTabHandler: function() {\r\n var dateBox = this.dateBox;\r\n this._timeView._hourBox.registerKeyHandler(\"tab\", (function(e) {\r\n if (e.shiftKey) {\r\n e.preventDefault();\r\n dateBox.focus()\r\n }\r\n }))\r\n },\r\n _preventFocusOnPopup: function(e) {\r\n if (!$(e.target).hasClass(\"dx-texteditor-input\")) {\r\n this.callBase.apply(this, arguments);\r\n if (!this.dateBox._hasFocusClass()) {\r\n this.dateBox.focus()\r\n }\r\n }\r\n },\r\n _updateDateTime: function(date) {\r\n var time = this._timeView.option(\"value\");\r\n date.setHours(time.getHours(), time.getMinutes(), time.getSeconds(), time.getMilliseconds());\r\n return date\r\n },\r\n getValue: function() {\r\n var _this$_widget$option;\r\n var date = null !== (_this$_widget$option = this._widget.option(\"value\")) && void 0 !== _this$_widget$option ? _this$_widget$option : this._widget.getContouredDate();\r\n date = date ? new Date(date) : new Date;\r\n return this._updateDateTime(date)\r\n },\r\n dispose: function() {\r\n clearTimeout(this._removeMinWidthTimer);\r\n clearTimeout(this._repaintTimer);\r\n this.callBase()\r\n }\r\n});\r\nexport default CalendarWithTimeStrategy;\r\n","/**\r\n * DevExtreme (esm/ui/date_box/ui.date_box.strategy.list.js)\r\n * Version: 22.2.4\r\n * Build date: Thu Jan 19 2023\r\n *\r\n * Copyright (c) 2012 - 2023 Developer Express Inc. ALL RIGHTS RESERVED\r\n * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/\r\n */\r\nimport {\r\n getOuterHeight,\r\n getHeight\r\n} from \"../../core/utils/size\";\r\nimport {\r\n getWindow\r\n} from \"../../core/utils/window\";\r\nvar window = getWindow();\r\nimport List from \"../list_light\";\r\nimport \"../list/modules/selection\";\r\nimport DateBoxStrategy from \"./ui.date_box.strategy\";\r\nimport {\r\n noop,\r\n ensureDefined\r\n} from \"../../core/utils/common\";\r\nimport {\r\n isDate\r\n} from \"../../core/utils/type\";\r\nimport {\r\n extend\r\n} from \"../../core/utils/extend\";\r\nimport dateUtils from \"./ui.date_utils\";\r\nimport dateLocalization from \"../../localization/date\";\r\nimport dateSerialization from \"../../core/utils/date_serialization\";\r\nimport {\r\n getSizeValue\r\n} from \"../drop_down_editor/utils\";\r\nvar DATE_FORMAT = \"date\";\r\nvar BOUNDARY_VALUES = {\r\n min: new Date(0, 0, 0, 0, 0),\r\n max: new Date(0, 0, 0, 23, 59)\r\n};\r\nvar ListStrategy = DateBoxStrategy.inherit({\r\n NAME: \"List\",\r\n supportedKeys: function() {\r\n return {\r\n tab: function() {\r\n var {\r\n opened: opened,\r\n applyValueMode: applyValueMode\r\n } = this.option();\r\n if (opened && \"instantly\" === applyValueMode) {\r\n this.close()\r\n }\r\n },\r\n space: noop,\r\n home: noop,\r\n end: noop\r\n }\r\n },\r\n getDefaultOptions: function() {\r\n return extend(this.callBase(), {\r\n applyValueMode: \"instantly\"\r\n })\r\n },\r\n getDisplayFormat: function(displayFormat) {\r\n return displayFormat || \"shorttime\"\r\n },\r\n popupConfig: function(_popupConfig) {\r\n return _popupConfig\r\n },\r\n getValue: function() {\r\n var selectedIndex = this._widget.option(\"selectedIndex\");\r\n if (-1 === selectedIndex) {\r\n return this.dateBox.option(\"value\")\r\n }\r\n var itemData = this._widgetItems[selectedIndex];\r\n return this._getDateByItemData(itemData)\r\n },\r\n useCurrentDateByDefault: function() {\r\n return true\r\n },\r\n getDefaultDate: function() {\r\n return new Date(null)\r\n },\r\n popupShowingHandler: function() {\r\n this.dateBox._dimensionChanged()\r\n },\r\n _renderWidget: function() {\r\n this.callBase();\r\n this._refreshItems()\r\n },\r\n _getWidgetName: function() {\r\n return List\r\n },\r\n _getWidgetOptions: function() {\r\n return {\r\n itemTemplate: this._timeListItemTemplate.bind(this),\r\n onItemClick: this._listItemClickHandler.bind(this),\r\n tabIndex: -1,\r\n onFocusedItemChanged: this._refreshActiveDescendant.bind(this),\r\n selectionMode: \"single\"\r\n }\r\n },\r\n _refreshActiveDescendant: function(e) {\r\n this.dateBox.setAria(\"activedescendant\", \"\");\r\n this.dateBox.setAria(\"activedescendant\", e.actionValue)\r\n },\r\n _refreshItems: function() {\r\n this._widgetItems = this._getTimeListItems();\r\n this._widget.option(\"items\", this._widgetItems)\r\n },\r\n renderOpenedState: function() {\r\n if (!this._widget) {\r\n return\r\n }\r\n this._widget.option(\"focusedElement\", null);\r\n this._setSelectedItemsByValue();\r\n if (this._widget.option(\"templatesRenderAsynchronously\")) {\r\n this._asyncScrollTimeout = setTimeout(this._scrollToSelectedItem.bind(this))\r\n } else {\r\n this._scrollToSelectedItem()\r\n }\r\n },\r\n dispose: function() {\r\n this.callBase();\r\n clearTimeout(this._asyncScrollTimeout)\r\n },\r\n _updateValue: function() {\r\n if (!this._widget) {\r\n return\r\n }\r\n this._refreshItems();\r\n this._setSelectedItemsByValue();\r\n this._scrollToSelectedItem()\r\n },\r\n _setSelectedItemsByValue: function() {\r\n var value = this.dateBoxValue();\r\n var dateIndex = this._getDateIndex(value);\r\n if (-1 === dateIndex) {\r\n this._widget.option(\"selectedItems\", [])\r\n } else {\r\n this._widget.option(\"selectedIndex\", dateIndex)\r\n }\r\n },\r\n _scrollToSelectedItem: function() {\r\n this._widget.scrollToItem(this._widget.option(\"selectedIndex\"))\r\n },\r\n _getDateIndex: function(date) {\r\n var result = -1;\r\n for (var i = 0, n = this._widgetItems.length; i < n; i++) {\r\n if (this._areDatesEqual(date, this._widgetItems[i])) {\r\n result = i;\r\n break\r\n }\r\n }\r\n return result\r\n },\r\n _areDatesEqual: function(first, second) {\r\n return isDate(first) && isDate(second) && first.getHours() === second.getHours() && first.getMinutes() === second.getMinutes()\r\n },\r\n _getTimeListItems: function() {\r\n var min = this.dateBox.dateOption(\"min\") || this._getBoundaryDate(\"min\");\r\n var max = this.dateBox.dateOption(\"max\") || this._getBoundaryDate(\"max\");\r\n var value = this.dateBox.dateOption(\"value\") || null;\r\n var delta = max - min;\r\n var minutes = min.getMinutes() % this.dateBox.option(\"interval\");\r\n if (delta < 0) {\r\n return []\r\n }\r\n if (delta > dateUtils.ONE_DAY) {\r\n delta = dateUtils.ONE_DAY\r\n }\r\n if (value - min < dateUtils.ONE_DAY) {\r\n return this._getRangeItems(min, new Date(min), delta)\r\n }\r\n min = this._getBoundaryDate(\"min\");\r\n min.setMinutes(minutes);\r\n if (value && Math.abs(value - max) < dateUtils.ONE_DAY) {\r\n delta = (60 * max.getHours() + Math.abs(max.getMinutes() - minutes)) * dateUtils.ONE_MINUTE\r\n }\r\n return this._getRangeItems(min, new Date(min), delta)\r\n },\r\n _getRangeItems: function(startValue, currentValue, rangeDuration) {\r\n var rangeItems = [];\r\n var interval = this.dateBox.option(\"interval\");\r\n while (currentValue - startValue <= rangeDuration) {\r\n rangeItems.push(new Date(currentValue));\r\n currentValue.setMinutes(currentValue.getMinutes() + interval)\r\n }\r\n return rangeItems\r\n },\r\n _getBoundaryDate: function(boundary) {\r\n var boundaryValue = BOUNDARY_VALUES[boundary];\r\n var currentValue = new Date(ensureDefined(this.dateBox.dateOption(\"value\"), 0));\r\n return new Date(currentValue.getFullYear(), currentValue.getMonth(), currentValue.getDate(), boundaryValue.getHours(), boundaryValue.getMinutes())\r\n },\r\n _timeListItemTemplate: function(itemData) {\r\n var displayFormat = this.dateBox.option(\"displayFormat\");\r\n return dateLocalization.format(itemData, this.getDisplayFormat(displayFormat))\r\n },\r\n _listItemClickHandler: function(e) {\r\n if (\"useButtons\" === this.dateBox.option(\"applyValueMode\")) {\r\n return\r\n }\r\n var date = this._getDateByItemData(e.itemData);\r\n this.dateBox.option(\"opened\", false);\r\n this.dateBoxValue(date, e.event)\r\n },\r\n _getDateByItemData: function(itemData) {\r\n var date = this.dateBox.option(\"value\");\r\n var hours = itemData.getHours();\r\n var minutes = itemData.getMinutes();\r\n var seconds = itemData.getSeconds();\r\n var year = itemData.getFullYear();\r\n var month = itemData.getMonth();\r\n var day = itemData.getDate();\r\n if (date) {\r\n if (this.dateBox.option(\"dateSerializationFormat\")) {\r\n date = dateSerialization.deserializeDate(date)\r\n } else {\r\n date = new Date(date)\r\n }\r\n date.setHours(hours);\r\n date.setMinutes(minutes);\r\n date.setSeconds(seconds);\r\n date.setFullYear(year);\r\n date.setMonth(month);\r\n date.setDate(day)\r\n } else {\r\n date = new Date(year, month, day, hours, minutes, 0, 0)\r\n }\r\n return date\r\n },\r\n getKeyboardListener: function() {\r\n return this._widget\r\n },\r\n _updatePopupHeight: function() {\r\n var dropDownOptionsHeight = getSizeValue(this.dateBox.option(\"dropDownOptions.height\"));\r\n if (void 0 === dropDownOptionsHeight || \"auto\" === dropDownOptionsHeight) {\r\n this.dateBox._setPopupOption(\"height\", \"auto\");\r\n var popupHeight = getOuterHeight(this._widget.$element());\r\n var maxHeight = .45 * getHeight(window);\r\n this.dateBox._setPopupOption(\"height\", Math.min(popupHeight, maxHeight))\r\n }\r\n this.dateBox._timeList && this.dateBox._timeList.updateDimensions()\r\n },\r\n getParsedText: function(text, format) {\r\n var value = this.callBase(text, format);\r\n if (value) {\r\n value = dateUtils.mergeDates(value, new Date(null), DATE_FORMAT)\r\n }\r\n return value\r\n }\r\n});\r\nexport default ListStrategy;\r\n","/**\r\n * DevExtreme (esm/ui/date_box/ui.date_box.base.js)\r\n * Version: 22.2.4\r\n * Build date: Thu Jan 19 2023\r\n *\r\n * Copyright (c) 2012 - 2023 Developer Express Inc. ALL RIGHTS RESERVED\r\n * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/\r\n */\r\nimport {\r\n getWindow,\r\n hasWindow\r\n} from \"../../core/utils/window\";\r\nvar window = getWindow();\r\nimport {\r\n isDate as isDateType,\r\n isString,\r\n isNumeric\r\n} from \"../../core/utils/type\";\r\nimport {\r\n createTextElementHiddenCopy\r\n} from \"../../core/utils/dom\";\r\nimport {\r\n each\r\n} from \"../../core/utils/iterator\";\r\nimport {\r\n extend\r\n} from \"../../core/utils/extend\";\r\nimport {\r\n inputType\r\n} from \"../../core/utils/support\";\r\nimport devices from \"../../core/devices\";\r\nimport config from \"../../core/config\";\r\nimport dateUtils from \"../../core/utils/date\";\r\nimport uiDateUtils from \"./ui.date_utils\";\r\nimport dateSerialization from \"../../core/utils/date_serialization\";\r\nimport DropDownEditor from \"../drop_down_editor/ui.drop_down_editor\";\r\nimport dateLocalization from \"../../localization/date\";\r\nimport messageLocalization from \"../../localization/message\";\r\nimport Calendar from \"./ui.date_box.strategy.calendar\";\r\nimport DateView from \"./ui.date_box.strategy.date_view\";\r\nimport Native from \"./ui.date_box.strategy.native\";\r\nimport CalendarWithTime from \"./ui.date_box.strategy.calendar_with_time\";\r\nimport List from \"./ui.date_box.strategy.list\";\r\nvar DATEBOX_CLASS = \"dx-datebox\";\r\nvar DX_AUTO_WIDTH_CLASS = \"dx-auto-width\";\r\nvar DX_INVALID_BADGE_CLASS = \"dx-show-invalid-badge\";\r\nvar DX_CLEAR_BUTTON_CLASS = \"dx-clear-button-area\";\r\nvar DATEBOX_WRAPPER_CLASS = \"dx-datebox-wrapper\";\r\nvar DROPDOWNEDITOR_OVERLAY_CLASS = \"dx-dropdowneditor-overlay\";\r\nvar PICKER_TYPE = {\r\n calendar: \"calendar\",\r\n rollers: \"rollers\",\r\n list: \"list\",\r\n native: \"native\"\r\n};\r\nvar TYPE = {\r\n date: \"date\",\r\n datetime: \"datetime\",\r\n time: \"time\"\r\n};\r\nvar STRATEGY_NAME = {\r\n calendar: \"Calendar\",\r\n dateView: \"DateView\",\r\n native: \"Native\",\r\n calendarWithTime: \"CalendarWithTime\",\r\n list: \"List\"\r\n};\r\nvar STRATEGY_CLASSES = {\r\n Calendar: Calendar,\r\n DateView: DateView,\r\n Native: Native,\r\n CalendarWithTime: CalendarWithTime,\r\n List: List\r\n};\r\nvar DateBox = DropDownEditor.inherit({\r\n _supportedKeys: function() {\r\n return extend(this.callBase(), this._strategy.supportedKeys())\r\n },\r\n _renderButtonContainers: function() {\r\n this.callBase.apply(this, arguments);\r\n this._strategy.customizeButtons()\r\n },\r\n _getDefaultOptions: function() {\r\n return extend(this.callBase(), {\r\n type: \"date\",\r\n showAnalogClock: true,\r\n value: null,\r\n dateSerializationFormat: void 0,\r\n min: void 0,\r\n max: void 0,\r\n displayFormat: null,\r\n interval: 30,\r\n disabledDates: null,\r\n pickerType: PICKER_TYPE.calendar,\r\n invalidDateMessage: messageLocalization.format(\"dxDateBox-validation-datetime\"),\r\n dateOutOfRangeMessage: messageLocalization.format(\"validation-range\"),\r\n applyButtonText: messageLocalization.format(\"OK\"),\r\n adaptivityEnabled: false,\r\n calendarOptions: {},\r\n useHiddenSubmitElement: true\r\n })\r\n },\r\n _defaultOptionsRules: function() {\r\n return this.callBase().concat([{\r\n device: {\r\n platform: \"ios\"\r\n },\r\n options: {\r\n \"dropDownOptions.showTitle\": true\r\n }\r\n }, {\r\n device: {\r\n platform: \"android\"\r\n },\r\n options: {\r\n buttonsLocation: \"bottom after\"\r\n }\r\n }, {\r\n device: function() {\r\n var realDevice = devices.real();\r\n var platform = realDevice.platform;\r\n return \"ios\" === platform || \"android\" === platform\r\n },\r\n options: {\r\n pickerType: PICKER_TYPE.native\r\n }\r\n }, {\r\n device: {\r\n platform: \"generic\",\r\n deviceType: \"desktop\"\r\n },\r\n options: {\r\n buttonsLocation: \"bottom after\"\r\n }\r\n }])\r\n },\r\n _initOptions: function(options) {\r\n this._userOptions = extend({}, options);\r\n this.callBase(options);\r\n this._updatePickerOptions()\r\n },\r\n _updatePickerOptions: function() {\r\n var pickerType = this.option(\"pickerType\");\r\n var type = this.option(\"type\");\r\n if (pickerType === PICKER_TYPE.list && (type === TYPE.datetime || type === TYPE.date)) {\r\n pickerType = PICKER_TYPE.calendar\r\n }\r\n if (type === TYPE.time && pickerType === PICKER_TYPE.calendar) {\r\n pickerType = PICKER_TYPE.list\r\n }\r\n this.option(\"showDropDownButton\", \"generic\" !== devices.real().platform || pickerType !== PICKER_TYPE.native);\r\n this._pickerType = pickerType\r\n },\r\n _init: function() {\r\n this._initStrategy();\r\n this.option(extend({}, this._strategy.getDefaultOptions(), this._userOptions));\r\n delete this._userOptions;\r\n this.callBase()\r\n },\r\n _toLowerCaseFirstLetter: function(string) {\r\n return string.charAt(0).toLowerCase() + string.substr(1)\r\n },\r\n _initStrategy: function() {\r\n var strategyName = this._getStrategyName(this._getFormatType());\r\n var strategy = STRATEGY_CLASSES[strategyName];\r\n if (!(this._strategy && this._strategy.NAME === strategyName)) {\r\n this._strategy = new strategy(this)\r\n }\r\n },\r\n _getFormatType: function() {\r\n var currentType = this.option(\"type\");\r\n var isTime = /h|m|s/g.test(currentType);\r\n var isDate = /d|M|Y/g.test(currentType);\r\n var type = \"\";\r\n if (isDate) {\r\n type += TYPE.date\r\n }\r\n if (isTime) {\r\n type += TYPE.time\r\n }\r\n return type\r\n },\r\n _getStrategyName: function(type) {\r\n var pickerType = this._pickerType;\r\n if (pickerType === PICKER_TYPE.rollers) {\r\n return STRATEGY_NAME.dateView\r\n } else if (pickerType === PICKER_TYPE.native) {\r\n return STRATEGY_NAME.native\r\n }\r\n if (type === TYPE.date) {\r\n return STRATEGY_NAME.calendar\r\n }\r\n if (type === TYPE.datetime) {\r\n return STRATEGY_NAME.calendarWithTime\r\n }\r\n return STRATEGY_NAME.list\r\n },\r\n _initMarkup: function() {\r\n this.$element().addClass(DATEBOX_CLASS);\r\n this.callBase();\r\n this._refreshFormatClass();\r\n this._refreshPickerTypeClass();\r\n this._strategy.renderInputMinMax(this._input())\r\n },\r\n _render: function() {\r\n this.callBase();\r\n this._formatValidationIcon()\r\n },\r\n _renderDimensions: function() {\r\n this.callBase();\r\n this.$element().toggleClass(DX_AUTO_WIDTH_CLASS, !this.option(\"width\"));\r\n this._updatePopupWidth();\r\n this._updatePopupHeight()\r\n },\r\n _dimensionChanged: function() {\r\n this.callBase();\r\n this._updatePopupHeight()\r\n },\r\n _updatePopupHeight: function() {\r\n if (this._popup) {\r\n var _this$_strategy$_upda, _this$_strategy;\r\n null === (_this$_strategy$_upda = (_this$_strategy = this._strategy)._updatePopupHeight) || void 0 === _this$_strategy$_upda ? void 0 : _this$_strategy$_upda.call(_this$_strategy)\r\n }\r\n },\r\n _refreshFormatClass: function() {\r\n var $element = this.$element();\r\n each(TYPE, (function(_, item) {\r\n $element.removeClass(DATEBOX_CLASS + \"-\" + item)\r\n }));\r\n $element.addClass(DATEBOX_CLASS + \"-\" + this.option(\"type\"))\r\n },\r\n _refreshPickerTypeClass: function() {\r\n var $element = this.$element();\r\n each(PICKER_TYPE, (function(_, item) {\r\n $element.removeClass(DATEBOX_CLASS + \"-\" + item)\r\n }));\r\n $element.addClass(DATEBOX_CLASS + \"-\" + this._pickerType)\r\n },\r\n _formatValidationIcon: function() {\r\n if (!hasWindow()) {\r\n return\r\n }\r\n var inputElement = this._input().get(0);\r\n var isRtlEnabled = this.option(\"rtlEnabled\");\r\n var clearButtonWidth = this._getClearButtonWidth();\r\n var longestElementDimensions = this._getLongestElementDimensions();\r\n var curWidth = parseFloat(window.getComputedStyle(inputElement).width) - clearButtonWidth;\r\n var shouldHideValidationIcon = longestElementDimensions.width > curWidth;\r\n var style = inputElement.style;\r\n this.$element().toggleClass(DX_INVALID_BADGE_CLASS, !shouldHideValidationIcon);\r\n if (shouldHideValidationIcon) {\r\n if (void 0 === this._storedPadding) {\r\n this._storedPadding = isRtlEnabled ? longestElementDimensions.leftPadding : longestElementDimensions.rightPadding\r\n }\r\n isRtlEnabled ? style.paddingLeft = 0 : style.paddingRight = 0\r\n } else {\r\n isRtlEnabled ? style.paddingLeft = this._storedPadding + \"px\" : style.paddingRight = this._storedPadding + \"px\"\r\n }\r\n },\r\n _getClearButtonWidth: function() {\r\n var clearButtonWidth = 0;\r\n if (this._isClearButtonVisible() && \"\" === this._input().val()) {\r\n var clearButtonElement = this.$element().find(\".\" + DX_CLEAR_BUTTON_CLASS).get(0);\r\n clearButtonWidth = parseFloat(window.getComputedStyle(clearButtonElement).width)\r\n }\r\n return clearButtonWidth\r\n },\r\n _getLongestElementDimensions: function() {\r\n var format = this._strategy.getDisplayFormat(this.option(\"displayFormat\"));\r\n var longestValue = dateLocalization.format(uiDateUtils.getLongestDate(format, dateLocalization.getMonthNames(), dateLocalization.getDayNames()), format);\r\n var $input = this._input();\r\n var inputElement = $input.get(0);\r\n var $longestValueElement = createTextElementHiddenCopy($input, longestValue);\r\n var isPaddingStored = void 0 !== this._storedPadding;\r\n var storedPadding = !isPaddingStored ? 0 : this._storedPadding;\r\n $longestValueElement.appendTo(this.$element());\r\n var elementWidth = parseFloat(window.getComputedStyle($longestValueElement.get(0)).width);\r\n var rightPadding = parseFloat(window.getComputedStyle(inputElement).paddingRight);\r\n var leftPadding = parseFloat(window.getComputedStyle(inputElement).paddingLeft);\r\n var necessaryWidth = elementWidth + leftPadding + rightPadding + storedPadding;\r\n $longestValueElement.remove();\r\n return {\r\n width: necessaryWidth,\r\n leftPadding: leftPadding,\r\n rightPadding: rightPadding\r\n }\r\n },\r\n _getKeyboardListeners() {\r\n return this.callBase().concat([this._strategy && this._strategy.getKeyboardListener()])\r\n },\r\n _renderPopup: function() {\r\n this.callBase();\r\n this._popup.$wrapper().addClass(DATEBOX_WRAPPER_CLASS);\r\n this._renderPopupWrapper()\r\n },\r\n _getPopupToolbarItems() {\r\n var _this$_strategy$_getP, _this$_strategy$_getP2, _this$_strategy2;\r\n var defaultItems = this.callBase();\r\n return null !== (_this$_strategy$_getP = null === (_this$_strategy$_getP2 = (_this$_strategy2 = this._strategy)._getPopupToolbarItems) || void 0 === _this$_strategy$_getP2 ? void 0 : _this$_strategy$_getP2.call(_this$_strategy2, defaultItems)) && void 0 !== _this$_strategy$_getP ? _this$_strategy$_getP : defaultItems\r\n },\r\n _popupConfig: function() {\r\n var popupConfig = this.callBase();\r\n return extend(this._strategy.popupConfig(popupConfig), {\r\n title: this._getPopupTitle(),\r\n dragEnabled: false\r\n })\r\n },\r\n _renderPopupWrapper: function() {\r\n if (!this._popup) {\r\n return\r\n }\r\n var $element = this.$element();\r\n var classPostfixes = extend({}, TYPE, PICKER_TYPE);\r\n each(classPostfixes, function(_, item) {\r\n $element.removeClass(DATEBOX_WRAPPER_CLASS + \"-\" + item)\r\n }.bind(this));\r\n this._popup.$wrapper().addClass(DATEBOX_WRAPPER_CLASS + \"-\" + this.option(\"type\")).addClass(DATEBOX_WRAPPER_CLASS + \"-\" + this._pickerType).addClass(DROPDOWNEDITOR_OVERLAY_CLASS)\r\n },\r\n _renderPopupContent: function() {\r\n this.callBase();\r\n this._strategy.renderPopupContent()\r\n },\r\n _getFirstPopupElement: function() {\r\n return this._strategy.getFirstPopupElement() || this.callBase()\r\n },\r\n _getLastPopupElement: function() {\r\n return this._strategy.getLastPopupElement() || this.callBase()\r\n },\r\n _popupShowingHandler: function() {\r\n this.callBase();\r\n this._strategy.popupShowingHandler()\r\n },\r\n _popupShownHandler: function() {\r\n this.callBase();\r\n this._strategy.renderOpenedState()\r\n },\r\n _popupHiddenHandler: function() {\r\n this.callBase();\r\n this._strategy.renderOpenedState();\r\n this._strategy.popupHiddenHandler()\r\n },\r\n _visibilityChanged: function(visible) {\r\n if (visible) {\r\n this._formatValidationIcon()\r\n }\r\n },\r\n _clearValueHandler: function(e) {\r\n this.option(\"text\", \"\");\r\n this.callBase(e)\r\n },\r\n _readOnlyPropValue: function() {\r\n if (this._pickerType === PICKER_TYPE.rollers) {\r\n return true\r\n }\r\n var platform = devices.real().platform;\r\n var isCustomValueDisabled = this._isNativeType() && (\"ios\" === platform || \"android\" === platform);\r\n if (isCustomValueDisabled) {\r\n return this.option(\"readOnly\")\r\n }\r\n return this.callBase()\r\n },\r\n _isClearButtonVisible: function() {\r\n return this.callBase() && !this._isNativeType()\r\n },\r\n _renderValue: function() {\r\n var value = this.dateOption(\"value\");\r\n this.option(\"text\", this._getDisplayedText(value));\r\n this._strategy.renderValue();\r\n return this.callBase()\r\n },\r\n _setSubmitValue: function() {\r\n var value = this.dateOption(\"value\");\r\n var dateSerializationFormat = this.option(\"dateSerializationFormat\");\r\n var submitFormat = uiDateUtils.SUBMIT_FORMATS_MAP[this.option(\"type\")];\r\n var submitValue = dateSerializationFormat ? dateSerialization.serializeDate(value, dateSerializationFormat) : uiDateUtils.toStandardDateFormat(value, submitFormat);\r\n this._getSubmitElement().val(submitValue)\r\n },\r\n _getDisplayedText: function(value) {\r\n var mode = this.option(\"mode\");\r\n var displayedText;\r\n if (\"text\" === mode) {\r\n var displayFormat = this._strategy.getDisplayFormat(this.option(\"displayFormat\"));\r\n displayedText = dateLocalization.format(value, displayFormat)\r\n } else {\r\n var format = this._getFormatByMode(mode);\r\n if (format) {\r\n displayedText = dateLocalization.format(value, format)\r\n } else {\r\n displayedText = uiDateUtils.toStandardDateFormat(value, mode)\r\n }\r\n }\r\n return displayedText\r\n },\r\n _getFormatByMode: function(mode) {\r\n return inputType(mode) ? null : uiDateUtils.FORMATS_MAP[mode]\r\n },\r\n _valueChangeEventHandler: function(e) {\r\n var {\r\n text: text,\r\n type: type,\r\n validationError: validationError\r\n } = this.option();\r\n var currentValue = this.dateOption(\"value\");\r\n if (text === this._getDisplayedText(currentValue)) {\r\n if (!validationError || validationError.editorSpecific) {\r\n this._applyInternalValidation(currentValue);\r\n this._applyCustomValidation(currentValue)\r\n }\r\n return\r\n }\r\n var parsedDate = this._getParsedDate(text);\r\n var value = null !== currentValue && void 0 !== currentValue ? currentValue : this._getDateByDefault();\r\n var newValue = uiDateUtils.mergeDates(value, parsedDate, type);\r\n var date = parsedDate && \"time\" === type ? newValue : parsedDate;\r\n if (this._applyInternalValidation(date).isValid) {\r\n var displayedText = this._getDisplayedText(newValue);\r\n if (value && newValue && value.getTime() === newValue.getTime() && displayedText !== text) {\r\n this._renderValue()\r\n } else {\r\n this.dateValue(newValue, e)\r\n }\r\n }\r\n },\r\n _getDateByDefault: function() {\r\n return this._strategy.useCurrentDateByDefault() && this._strategy.getDefaultDate()\r\n },\r\n _getParsedDate: function(text) {\r\n var displayFormat = this._strategy.getDisplayFormat(this.option(\"displayFormat\"));\r\n var parsedText = this._strategy.getParsedText(text, displayFormat);\r\n return null !== parsedText && void 0 !== parsedText ? parsedText : void 0\r\n },\r\n _applyInternalValidation(value) {\r\n var text = this.option(\"text\");\r\n var hasText = !!text && null !== value;\r\n var isDate = !!value && isDateType(value) && !isNaN(value.getTime());\r\n var isDateInRange = isDate && dateUtils.dateInRange(value, this.dateOption(\"min\"), this.dateOption(\"max\"), this.option(\"type\"));\r\n var isValid = !hasText && !value || isDateInRange;\r\n var validationMessage = \"\";\r\n if (!isDate) {\r\n validationMessage = this.option(\"invalidDateMessage\")\r\n } else if (!isDateInRange) {\r\n validationMessage = this.option(\"dateOutOfRangeMessage\")\r\n }\r\n this.option({\r\n isValid: isValid,\r\n validationError: isValid ? null : {\r\n editorSpecific: true,\r\n message: validationMessage\r\n }\r\n });\r\n return {\r\n isValid: isValid,\r\n isDate: isDate\r\n }\r\n },\r\n _applyCustomValidation: function(value) {\r\n this.validationRequest.fire({\r\n editor: this,\r\n value: this._serializeDate(value)\r\n })\r\n },\r\n _isValueChanged: function(newValue) {\r\n var oldValue = this.dateOption(\"value\");\r\n var oldTime = oldValue && oldValue.getTime();\r\n var newTime = newValue && newValue.getTime();\r\n return oldTime !== newTime\r\n },\r\n _isTextChanged: function(newValue) {\r\n var oldText = this.option(\"text\");\r\n var newText = newValue && this._getDisplayedText(newValue) || \"\";\r\n return oldText !== newText\r\n },\r\n _renderProps: function() {\r\n this.callBase();\r\n this._input().attr(\"autocomplete\", \"off\")\r\n },\r\n _renderOpenedState: function() {\r\n if (!this._isNativeType()) {\r\n this.callBase()\r\n }\r\n if (this._strategy.isAdaptivityChanged()) {\r\n this._refreshStrategy()\r\n }\r\n },\r\n _getPopupTitle: function() {\r\n var placeholder = this.option(\"placeholder\");\r\n if (placeholder) {\r\n return placeholder\r\n }\r\n var type = this.option(\"type\");\r\n if (type === TYPE.time) {\r\n return messageLocalization.format(\"dxDateBox-simulatedDataPickerTitleTime\")\r\n }\r\n if (type === TYPE.date || type === TYPE.datetime) {\r\n return messageLocalization.format(\"dxDateBox-simulatedDataPickerTitleDate\")\r\n }\r\n return \"\"\r\n },\r\n _refreshStrategy: function() {\r\n this._strategy.dispose();\r\n this._initStrategy();\r\n this.option(this._strategy.getDefaultOptions());\r\n this._refresh()\r\n },\r\n _applyButtonHandler: function(e) {\r\n var value = this._strategy.getValue();\r\n this.dateValue(value, e.event);\r\n this.callBase()\r\n },\r\n _dispose: function() {\r\n var _this$_strategy3;\r\n this.callBase();\r\n null === (_this$_strategy3 = this._strategy) || void 0 === _this$_strategy3 ? void 0 : _this$_strategy3.dispose()\r\n },\r\n _isNativeType: function() {\r\n return this._pickerType === PICKER_TYPE.native\r\n },\r\n _updatePopupTitle: function() {\r\n var _this$_popup;\r\n null === (_this$_popup = this._popup) || void 0 === _this$_popup ? void 0 : _this$_popup.option(\"title\", this._getPopupTitle())\r\n },\r\n _optionChanged: function(args) {\r\n switch (args.name) {\r\n case \"showClearButton\":\r\n case \"buttons\":\r\n this.callBase.apply(this, arguments);\r\n this._formatValidationIcon();\r\n break;\r\n case \"pickerType\":\r\n this._updatePickerOptions({\r\n pickerType: args.value\r\n });\r\n this._refreshStrategy();\r\n this._refreshPickerTypeClass();\r\n this._invalidate();\r\n break;\r\n case \"type\":\r\n this._updatePickerOptions({\r\n format: args.value\r\n });\r\n this._refreshStrategy();\r\n this._refreshFormatClass();\r\n this._renderPopupWrapper();\r\n this._formatValidationIcon();\r\n this._updateValue();\r\n break;\r\n case \"placeholder\":\r\n this.callBase.apply(this, arguments);\r\n this._updatePopupTitle();\r\n break;\r\n case \"min\":\r\n case \"max\":\r\n var isValid = this.option(\"isValid\");\r\n this._applyInternalValidation(this.dateOption(\"value\"));\r\n if (!isValid) {\r\n this._applyCustomValidation(this.dateOption(\"value\"))\r\n }\r\n this._invalidate();\r\n break;\r\n case \"dateSerializationFormat\":\r\n case \"interval\":\r\n case \"disabledDates\":\r\n case \"calendarOptions\":\r\n this._invalidate();\r\n break;\r\n case \"displayFormat\":\r\n this.option(\"text\", this._getDisplayedText(this.dateOption(\"value\")));\r\n this._renderInputValue();\r\n break;\r\n case \"text\":\r\n this._strategy.textChangedHandler(args.value);\r\n this.callBase.apply(this, arguments);\r\n break;\r\n case \"isValid\":\r\n this.callBase.apply(this, arguments);\r\n this._formatValidationIcon();\r\n break;\r\n case \"showDropDownButton\":\r\n this._formatValidationIcon();\r\n this.callBase.apply(this, arguments);\r\n break;\r\n case \"readOnly\":\r\n this.callBase.apply(this, arguments);\r\n this._formatValidationIcon();\r\n break;\r\n case \"todayButtonText\":\r\n this._setPopupOption(\"toolbarItems\", this._getPopupToolbarItems());\r\n break;\r\n case \"invalidDateMessage\":\r\n case \"dateOutOfRangeMessage\":\r\n case \"adaptivityEnabled\":\r\n case \"showAnalogClock\":\r\n break;\r\n default:\r\n this.callBase.apply(this, arguments)\r\n }\r\n },\r\n _getSerializationFormat: function() {\r\n var value = this.option(\"value\");\r\n if (this.option(\"dateSerializationFormat\") && config().forceIsoDateParsing) {\r\n return this.option(\"dateSerializationFormat\")\r\n }\r\n if (isNumeric(value)) {\r\n return \"number\"\r\n }\r\n if (!isString(value)) {\r\n return\r\n }\r\n return dateSerialization.getDateSerializationFormat(value)\r\n },\r\n _updateValue: function(value) {\r\n this.callBase();\r\n this._applyInternalValidation(null !== value && void 0 !== value ? value : this.dateOption(\"value\"))\r\n },\r\n dateValue: function(value, dxEvent) {\r\n var isValueChanged = this._isValueChanged(value);\r\n if (isValueChanged && dxEvent) {\r\n this._saveValueChangeEvent(dxEvent)\r\n }\r\n if (!isValueChanged) {\r\n if (this._isTextChanged(value)) {\r\n this._updateValue(value)\r\n } else if (\"\" === this.option(\"text\")) {\r\n this._applyCustomValidation(value)\r\n }\r\n }\r\n return this.dateOption(\"value\", value)\r\n },\r\n dateOption: function(optionName, value) {\r\n if (1 === arguments.length) {\r\n return dateSerialization.deserializeDate(this.option(optionName))\r\n }\r\n this.option(optionName, this._serializeDate(value))\r\n },\r\n _serializeDate: function(date) {\r\n var serializationFormat = this._getSerializationFormat();\r\n return dateSerialization.serializeDate(date, serializationFormat)\r\n },\r\n _clearValue: function() {\r\n var value = this.option(\"value\");\r\n this.callBase();\r\n if (null === value) {\r\n this._applyCustomValidation(null)\r\n }\r\n },\r\n reset: function() {\r\n var value = this.option(\"value\");\r\n this.callBase();\r\n if (null === value) {\r\n this._applyInternalValidation(null)\r\n }\r\n }\r\n});\r\nexport default DateBox;\r\n","/**\r\n * DevExtreme (esm/ui/date_box/ui.date_box.mask.js)\r\n * Version: 22.2.4\r\n * Build date: Thu Jan 19 2023\r\n *\r\n * Copyright (c) 2012 - 2023 Developer Express Inc. ALL RIGHTS RESERVED\r\n * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/\r\n */\r\nimport {\r\n addNamespace,\r\n normalizeKeyName,\r\n isCommandKeyPressed\r\n} from \"../../events/utils/index\";\r\nimport {\r\n isFunction,\r\n isString,\r\n isDate,\r\n isDefined\r\n} from \"../../core/utils/type\";\r\nimport {\r\n clipboardText\r\n} from \"../../core/utils/dom\";\r\nimport {\r\n extend\r\n} from \"../../core/utils/extend\";\r\nimport {\r\n fitIntoRange,\r\n inRange,\r\n sign\r\n} from \"../../core/utils/math\";\r\nimport eventsEngine from \"../../events/core/events_engine\";\r\nimport {\r\n getDatePartIndexByPosition,\r\n renderDateParts\r\n} from \"./ui.date_box.mask.parts\";\r\nimport dateLocalization from \"../../localization/date\";\r\nimport {\r\n getRegExpInfo\r\n} from \"../../localization/ldml/date.parser\";\r\nimport {\r\n getFormat\r\n} from \"../../localization/ldml/date.format\";\r\nimport DateBoxBase from \"./ui.date_box.base\";\r\nimport numberLocalization from \"../../localization/number\";\r\nimport devices from \"../../core/devices\";\r\nimport browser from \"../../core/utils/browser\";\r\nvar MASK_EVENT_NAMESPACE = \"dateBoxMask\";\r\nvar FORWARD = 1;\r\nvar BACKWARD = -1;\r\nvar DateBoxMask = DateBoxBase.inherit({\r\n _supportedKeys(e) {\r\n var originalHandlers = this.callBase(e);\r\n var callOriginalHandler = e => {\r\n var originalHandler = originalHandlers[normalizeKeyName(e)];\r\n return originalHandler && originalHandler.apply(this, [e])\r\n };\r\n var applyHandler = (e, maskHandler) => {\r\n if (this._shouldUseOriginalHandler(e)) {\r\n return callOriginalHandler.apply(this, [e])\r\n } else {\r\n return maskHandler.apply(this, [e])\r\n }\r\n };\r\n return extend({}, originalHandlers, {\r\n del: e => applyHandler(e, event => {\r\n this._revertPart(FORWARD);\r\n this._isAllSelected() || event.preventDefault()\r\n }),\r\n backspace: e => applyHandler(e, event => {\r\n this._revertPart(BACKWARD);\r\n this._isAllSelected() || event.preventDefault()\r\n }),\r\n home: e => applyHandler(e, event => {\r\n this._selectFirstPart();\r\n event.preventDefault()\r\n }),\r\n end: e => applyHandler(e, event => {\r\n this._selectLastPart();\r\n event.preventDefault()\r\n }),\r\n escape: e => applyHandler(e, event => {\r\n this._revertChanges(event)\r\n }),\r\n enter: e => applyHandler(e, () => {\r\n this._enterHandler()\r\n }),\r\n leftArrow: e => applyHandler(e, event => {\r\n this._selectNextPart(BACKWARD);\r\n event.preventDefault()\r\n }),\r\n rightArrow: e => applyHandler(e, event => {\r\n this._selectNextPart(FORWARD);\r\n event.preventDefault()\r\n }),\r\n upArrow: e => applyHandler(e, event => {\r\n this._upDownArrowHandler(FORWARD);\r\n event.preventDefault()\r\n }),\r\n downArrow: e => applyHandler(e, event => {\r\n this._upDownArrowHandler(BACKWARD);\r\n event.preventDefault()\r\n })\r\n })\r\n },\r\n _shouldUseOriginalHandler(e) {\r\n var isNotDeletingInCalendar = this.option(\"opened\") && e && -1 === [\"backspace\", \"del\"].indexOf(normalizeKeyName(e));\r\n return !this._useMaskBehavior() || isNotDeletingInCalendar || e && e.altKey\r\n },\r\n _upDownArrowHandler(step) {\r\n this._setNewDateIfEmpty();\r\n var originalValue = this._getActivePartValue(this._initialMaskValue);\r\n var currentValue = this._getActivePartValue();\r\n var delta = currentValue - originalValue;\r\n this._loadMaskValue(this._initialMaskValue);\r\n this._partIncrease(delta + step, true)\r\n },\r\n _getDefaultOptions() {\r\n return extend(this.callBase(), {\r\n useMaskBehavior: false,\r\n emptyDateValue: new Date(2e3, 0, 1, 0, 0, 0)\r\n })\r\n },\r\n _isSingleCharKey(_ref) {\r\n var {\r\n originalEvent: originalEvent,\r\n alt: alt\r\n } = _ref;\r\n var key = originalEvent.data || originalEvent.key;\r\n return \"string\" === typeof key && 1 === key.length && !alt && !isCommandKeyPressed(originalEvent)\r\n },\r\n _isSingleDigitKey(e) {\r\n var _e$originalEvent;\r\n var data = null === (_e$originalEvent = e.originalEvent) || void 0 === _e$originalEvent ? void 0 : _e$originalEvent.data;\r\n return 1 === (null === data || void 0 === data ? void 0 : data.length) && parseInt(data, 10)\r\n },\r\n _useBeforeInputEvent: function() {\r\n return devices.real().android\r\n },\r\n _keyInputHandler(e, key) {\r\n var oldInputValue = this._input().val();\r\n this._processInputKey(key);\r\n e.preventDefault();\r\n var isValueChanged = oldInputValue !== this._input().val();\r\n isValueChanged && eventsEngine.trigger(this._input(), \"input\")\r\n },\r\n _keyboardHandler(e) {\r\n var key = e.originalEvent.key;\r\n var result = this.callBase(e);\r\n if (!this._useMaskBehavior() || this._useBeforeInputEvent()) {\r\n return result\r\n }\r\n if (browser.chrome && \"Process\" === e.key && 0 === e.code.indexOf(\"Digit\")) {\r\n key = e.code.replace(\"Digit\", \"\");\r\n this._processInputKey(key);\r\n this._maskInputHandler = () => {\r\n this._renderSelectedPart()\r\n }\r\n } else if (this._isSingleCharKey(e)) {\r\n this._keyInputHandler(e.originalEvent, key)\r\n }\r\n return result\r\n },\r\n _maskBeforeInputHandler(e) {\r\n this._maskInputHandler = null;\r\n var {\r\n inputType: inputType\r\n } = e.originalEvent;\r\n if (\"insertCompositionText\" === inputType) {\r\n this._maskInputHandler = () => {\r\n this._renderSelectedPart()\r\n }\r\n }\r\n var isBackwardDeletion = \"deleteContentBackward\" === inputType;\r\n var isForwardDeletion = \"deleteContentForward\" === inputType;\r\n if (isBackwardDeletion || isForwardDeletion) {\r\n var direction = isBackwardDeletion ? BACKWARD : FORWARD;\r\n this._maskInputHandler = () => {\r\n this._revertPart();\r\n this._selectNextPart(direction)\r\n }\r\n }\r\n if (!this._useMaskBehavior() || !this._isSingleCharKey(e)) {\r\n return\r\n }\r\n var key = e.originalEvent.data;\r\n this._keyInputHandler(e, key);\r\n return true\r\n },\r\n _keyPressHandler(e) {\r\n var {\r\n originalEvent: event\r\n } = e;\r\n if (\"insertCompositionText\" === (null === event || void 0 === event ? void 0 : event.inputType) && this._isSingleDigitKey(e)) {\r\n this._processInputKey(event.data);\r\n this._renderDisplayText(this._getDisplayedText(this._maskValue));\r\n this._selectNextPart()\r\n }\r\n this.callBase(e);\r\n if (this._maskInputHandler) {\r\n this._maskInputHandler();\r\n this._maskInputHandler = null\r\n }\r\n },\r\n _processInputKey(key) {\r\n if (this._isAllSelected()) {\r\n this._activePartIndex = 0\r\n }\r\n this._setNewDateIfEmpty();\r\n if (isNaN(parseInt(key))) {\r\n this._searchString(key)\r\n } else {\r\n this._searchNumber(key)\r\n }\r\n },\r\n _isAllSelected() {\r\n var caret = this._caret();\r\n return caret.end - caret.start === this.option(\"text\").length\r\n },\r\n _getFormatPattern() {\r\n if (this._formatPattern) {\r\n return this._formatPattern\r\n }\r\n var format = this._strategy.getDisplayFormat(this.option(\"displayFormat\"));\r\n var isLDMLPattern = isString(format) && !dateLocalization._getPatternByFormat(format);\r\n if (isLDMLPattern) {\r\n this._formatPattern = format\r\n } else {\r\n this._formatPattern = getFormat((function(value) {\r\n return dateLocalization.format(value, format)\r\n }))\r\n }\r\n return this._formatPattern\r\n },\r\n _setNewDateIfEmpty() {\r\n if (!this._maskValue) {\r\n var value = \"time\" === this.option(\"type\") ? new Date(null) : new Date;\r\n this._maskValue = value;\r\n this._initialMaskValue = value;\r\n this._renderDateParts()\r\n }\r\n },\r\n _partLimitsReached(max) {\r\n var maxLimitLength = String(max).length;\r\n var formatLength = this._getActivePartProp(\"pattern\").length;\r\n var isShortFormat = 1 === formatLength;\r\n var maxSearchLength = isShortFormat ? maxLimitLength : Math.min(formatLength, maxLimitLength);\r\n var isLengthExceeded = this._searchValue.length === maxSearchLength;\r\n var isValueOverflowed = parseInt(this._searchValue + \"0\") > max;\r\n return isLengthExceeded || isValueOverflowed\r\n },\r\n _searchNumber(char) {\r\n var {\r\n max: max\r\n } = this._getActivePartLimits();\r\n var maxLimitLength = String(max).length;\r\n this._searchValue = (this._searchValue + char).substr(-maxLimitLength);\r\n if (isNaN(this._searchValue)) {\r\n this._searchValue = char\r\n }\r\n this._setActivePartValue(this._searchValue);\r\n if (this._partLimitsReached(max)) {\r\n this._selectNextPart(FORWARD)\r\n }\r\n },\r\n _searchString(char) {\r\n if (!isNaN(parseInt(this._getActivePartProp(\"text\")))) {\r\n return\r\n }\r\n var limits = this._getActivePartProp(\"limits\")(this._maskValue);\r\n var startString = this._searchValue + char.toLowerCase();\r\n var endLimit = limits.max - limits.min;\r\n for (var i = 0; i <= endLimit; i++) {\r\n this._loadMaskValue(this._initialMaskValue);\r\n this._partIncrease(i + 1);\r\n if (0 === this._getActivePartProp(\"text\").toLowerCase().indexOf(startString)) {\r\n this._searchValue = startString;\r\n return\r\n }\r\n }\r\n this._setNewDateIfEmpty();\r\n if (this._searchValue) {\r\n this._clearSearchValue();\r\n this._searchString(char)\r\n }\r\n },\r\n _clearSearchValue() {\r\n this._searchValue = \"\"\r\n },\r\n _revertPart: function(direction) {\r\n if (!this._isAllSelected()) {\r\n var actual = this._getActivePartValue(this.option(\"emptyDateValue\"));\r\n this._setActivePartValue(actual);\r\n this._selectNextPart(direction)\r\n }\r\n this._clearSearchValue()\r\n },\r\n _useMaskBehavior() {\r\n return this.option(\"useMaskBehavior\") && \"text\" === this.option(\"mode\")\r\n },\r\n _prepareRegExpInfo() {\r\n this._regExpInfo = getRegExpInfo(this._getFormatPattern(), dateLocalization);\r\n var regexp = this._regExpInfo.regexp;\r\n var source = regexp.source;\r\n var flags = regexp.flags;\r\n var quantifierRegexp = new RegExp(/(\\{[0-9]+,?[0-9]*\\})/);\r\n var convertedSource = source.split(quantifierRegexp).map(sourcePart => quantifierRegexp.test(sourcePart) ? sourcePart : numberLocalization.convertDigits(sourcePart, false)).join(\"\");\r\n this._regExpInfo.regexp = new RegExp(convertedSource, flags)\r\n },\r\n _initMaskState() {\r\n this._activePartIndex = 0;\r\n this._formatPattern = null;\r\n this._prepareRegExpInfo();\r\n this._loadMaskValue()\r\n },\r\n _renderMask() {\r\n this.callBase();\r\n this._detachMaskEvents();\r\n this._clearMaskState();\r\n if (this._useMaskBehavior()) {\r\n this._attachMaskEvents();\r\n this._initMaskState();\r\n this._renderDateParts()\r\n }\r\n },\r\n _renderDateParts() {\r\n if (!this._useMaskBehavior()) {\r\n return\r\n }\r\n var text = this.option(\"text\") || this._getDisplayedText(this._maskValue);\r\n if (text) {\r\n this._dateParts = renderDateParts(text, this._regExpInfo);\r\n if (!this._input().is(\":hidden\")) {\r\n this._selectNextPart()\r\n }\r\n }\r\n },\r\n _detachMaskEvents() {\r\n eventsEngine.off(this._input(), \".\" + MASK_EVENT_NAMESPACE)\r\n },\r\n _attachMaskEvents() {\r\n eventsEngine.on(this._input(), addNamespace(\"dxclick\", MASK_EVENT_NAMESPACE), this._maskClickHandler.bind(this));\r\n eventsEngine.on(this._input(), addNamespace(\"paste\", MASK_EVENT_NAMESPACE), this._maskPasteHandler.bind(this));\r\n eventsEngine.on(this._input(), addNamespace(\"drop\", MASK_EVENT_NAMESPACE), () => {\r\n this._renderSelectedPart()\r\n });\r\n eventsEngine.on(this._input(), addNamespace(\"compositionend\", MASK_EVENT_NAMESPACE), this._maskCompositionEndHandler.bind(this));\r\n if (this._useBeforeInputEvent()) {\r\n eventsEngine.on(this._input(), addNamespace(\"beforeinput\", MASK_EVENT_NAMESPACE), this._maskBeforeInputHandler.bind(this))\r\n }\r\n },\r\n _renderSelectedPart() {\r\n this._renderDisplayText(this._getDisplayedText(this._maskValue));\r\n this._selectNextPart()\r\n },\r\n _selectLastPart() {\r\n if (this.option(\"text\")) {\r\n this._activePartIndex = this._dateParts.length;\r\n this._selectNextPart(BACKWARD)\r\n }\r\n },\r\n _selectFirstPart() {\r\n if (this.option(\"text\")) {\r\n this._activePartIndex = -1;\r\n this._selectNextPart(FORWARD)\r\n }\r\n },\r\n _onMouseWheel(e) {\r\n if (this._useMaskBehavior()) {\r\n this._partIncrease(e.delta > 0 ? FORWARD : BACKWARD, e)\r\n }\r\n },\r\n _selectNextPart() {\r\n var step = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : 0;\r\n if (!this.option(\"text\") || this._disposed) {\r\n return\r\n }\r\n if (step) {\r\n this._initialMaskValue = new Date(this._maskValue)\r\n }\r\n var index = fitIntoRange(this._activePartIndex + step, 0, this._dateParts.length - 1);\r\n if (this._dateParts[index].isStub) {\r\n var isBoundaryIndex = 0 === index && step < 0 || index === this._dateParts.length - 1 && step > 0;\r\n if (!isBoundaryIndex) {\r\n this._selectNextPart(step >= 0 ? step + 1 : step - 1);\r\n return\r\n } else {\r\n index = this._activePartIndex\r\n }\r\n }\r\n if (this._activePartIndex !== index) {\r\n this._clearSearchValue()\r\n }\r\n this._activePartIndex = index;\r\n this._caret(this._getActivePartProp(\"caret\"))\r\n },\r\n _getRealLimitsPattern() {\r\n if (\"d\" === this._getActivePartProp(\"pattern\")[0]) {\r\n return \"dM\"\r\n }\r\n },\r\n _getActivePartLimits(lockOtherParts) {\r\n var limitFunction = this._getActivePartProp(\"limits\");\r\n return limitFunction(this._maskValue, lockOtherParts && this._getRealLimitsPattern())\r\n },\r\n _getActivePartValue(dateValue) {\r\n dateValue = dateValue || this._maskValue;\r\n var getter = this._getActivePartProp(\"getter\");\r\n return isFunction(getter) ? getter(dateValue) : dateValue[getter]()\r\n },\r\n _addLeadingZeroes(value) {\r\n var zeroes = this._searchValue.match(/^0+/);\r\n var limits = this._getActivePartLimits();\r\n var maxLimitLength = String(limits.max).length;\r\n return ((zeroes && zeroes[0] || \"\") + String(value)).substr(-maxLimitLength)\r\n },\r\n _setActivePartValue(value, dateValue) {\r\n dateValue = dateValue || this._maskValue;\r\n var setter = this._getActivePartProp(\"setter\");\r\n var limits = this._getActivePartLimits();\r\n value = inRange(value, limits.min, limits.max) ? value : value % 10;\r\n value = this._addLeadingZeroes(fitIntoRange(value, limits.min, limits.max));\r\n isFunction(setter) ? setter(dateValue, value) : dateValue[setter](value);\r\n this._renderDisplayText(this._getDisplayedText(dateValue));\r\n this._renderDateParts()\r\n },\r\n _getActivePartProp(property) {\r\n if (!this._dateParts || !this._dateParts[this._activePartIndex]) {\r\n return\r\n }\r\n return this._dateParts[this._activePartIndex][property]\r\n },\r\n _loadMaskValue() {\r\n var value = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : this.dateOption(\"value\");\r\n this._maskValue = value && new Date(value);\r\n this._initialMaskValue = value && new Date(value)\r\n },\r\n _saveMaskValue() {\r\n var value = this._maskValue && new Date(this._maskValue);\r\n if (value && \"date\" === this.option(\"type\")) {\r\n value.setHours(0, 0, 0, 0)\r\n }\r\n this._initialMaskValue = new Date(value);\r\n this.dateOption(\"value\", value)\r\n },\r\n _revertChanges() {\r\n this._loadMaskValue();\r\n this._renderDisplayText(this._getDisplayedText(this._maskValue));\r\n this._renderDateParts()\r\n },\r\n _renderDisplayText(text) {\r\n this.callBase(text);\r\n if (this._useMaskBehavior()) {\r\n this.option(\"text\", text)\r\n }\r\n },\r\n _partIncrease(step, lockOtherParts) {\r\n this._setNewDateIfEmpty();\r\n var {\r\n max: max,\r\n min: min\r\n } = this._getActivePartLimits(lockOtherParts);\r\n var limitDelta = max - min;\r\n if (1 === limitDelta) {\r\n limitDelta++\r\n }\r\n var newValue = step + this._getActivePartValue();\r\n if (newValue > max) {\r\n newValue = this._applyLimits(newValue, {\r\n limitBase: min,\r\n limitClosest: max,\r\n limitDelta: limitDelta\r\n })\r\n } else if (newValue < min) {\r\n newValue = this._applyLimits(newValue, {\r\n limitBase: max,\r\n limitClosest: min,\r\n limitDelta: limitDelta\r\n })\r\n }\r\n this._setActivePartValue(newValue)\r\n },\r\n _applyLimits(newValue, _ref2) {\r\n var {\r\n limitBase: limitBase,\r\n limitClosest: limitClosest,\r\n limitDelta: limitDelta\r\n } = _ref2;\r\n var delta = (newValue - limitClosest) % limitDelta;\r\n return delta ? limitBase + delta - 1 * sign(delta) : limitClosest\r\n },\r\n _maskClickHandler() {\r\n this._loadMaskValue(this._maskValue);\r\n if (this.option(\"text\")) {\r\n this._activePartIndex = getDatePartIndexByPosition(this._dateParts, this._caret().start);\r\n if (!this._isAllSelected()) {\r\n if (isDefined(this._activePartIndex)) {\r\n this._caret(this._getActivePartProp(\"caret\"))\r\n } else {\r\n this._selectLastPart()\r\n }\r\n }\r\n }\r\n },\r\n _maskCompositionEndHandler(e) {\r\n this._input().val(this._getDisplayedText(this._maskValue));\r\n this._selectNextPart();\r\n this._maskInputHandler = () => {\r\n this._renderSelectedPart()\r\n }\r\n },\r\n _maskPasteHandler(e) {\r\n var newText = this._replaceSelectedText(this.option(\"text\"), this._caret(), clipboardText(e));\r\n var date = dateLocalization.parse(newText, this._getFormatPattern());\r\n if (date && this._isDateValid(date)) {\r\n this._maskValue = date;\r\n this._renderDisplayText(this._getDisplayedText(this._maskValue));\r\n this._renderDateParts();\r\n this._selectNextPart()\r\n }\r\n e.preventDefault()\r\n },\r\n _isDateValid: date => isDate(date) && !isNaN(date),\r\n _isValueDirty() {\r\n var value = this.dateOption(\"value\");\r\n return (this._maskValue && this._maskValue.getTime()) !== (value && value.getTime())\r\n },\r\n _fireChangeEvent() {\r\n this._clearSearchValue();\r\n if (this._isValueDirty()) {\r\n eventsEngine.trigger(this._input(), \"change\")\r\n }\r\n },\r\n _enterHandler() {\r\n this._fireChangeEvent();\r\n this._selectNextPart(FORWARD)\r\n },\r\n _focusOutHandler(e) {\r\n var shouldFireChangeEvent = this._useMaskBehavior() && !e.isDefaultPrevented();\r\n if (shouldFireChangeEvent) {\r\n this._fireChangeEvent();\r\n this.callBase(e);\r\n this._selectFirstPart(e)\r\n } else {\r\n this.callBase(e)\r\n }\r\n },\r\n _valueChangeEventHandler(e) {\r\n var text = this.option(\"text\");\r\n if (this._useMaskBehavior()) {\r\n this._saveValueChangeEvent(e);\r\n if (!text) {\r\n this._maskValue = null\r\n } else if (null === this._maskValue) {\r\n this._loadMaskValue(text)\r\n }\r\n this._saveMaskValue()\r\n } else {\r\n this.callBase(e)\r\n }\r\n },\r\n _optionChanged(args) {\r\n switch (args.name) {\r\n case \"useMaskBehavior\":\r\n this._renderMask();\r\n break;\r\n case \"displayFormat\":\r\n case \"mode\":\r\n this.callBase(args);\r\n this._renderMask();\r\n break;\r\n case \"value\":\r\n this._loadMaskValue();\r\n this.callBase(args);\r\n this._renderDateParts();\r\n break;\r\n case \"emptyDateValue\":\r\n break;\r\n default:\r\n this.callBase(args)\r\n }\r\n },\r\n _clearMaskState() {\r\n this._clearSearchValue();\r\n delete this._dateParts;\r\n delete this._activePartIndex;\r\n delete this._maskValue\r\n },\r\n reset() {\r\n this._clearMaskState();\r\n this._activePartIndex = 0;\r\n this.callBase()\r\n },\r\n _clean() {\r\n this.callBase();\r\n this._detachMaskEvents();\r\n this._clearMaskState()\r\n }\r\n});\r\nexport default DateBoxMask;\r\n","/**\r\n * DevExtreme (esm/ui/date_box/ui.date_box.js)\r\n * Version: 22.2.4\r\n * Build date: Thu Jan 19 2023\r\n *\r\n * Copyright (c) 2012 - 2023 Developer Express Inc. ALL RIGHTS RESERVED\r\n * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/\r\n */\r\nimport registerComponent from \"../../core/component_registrator\";\r\nimport DateBoxMask from \"./ui.date_box.mask\";\r\nregisterComponent(\"dxDateBox\", DateBoxMask);\r\nexport default DateBoxMask;\r\n","/**\r\n * DevExtreme (esm/ui/drawer/ui.drawer.animation.js)\r\n * Version: 22.2.4\r\n * Build date: Thu Jan 19 2023\r\n *\r\n * Copyright (c) 2012 - 2023 Developer Express Inc. ALL RIGHTS RESERVED\r\n * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/\r\n */\r\nimport fx from \"../../animation/fx\";\r\nimport {\r\n camelize\r\n} from \"../../core/utils/inflector\";\r\nexport var animation = {\r\n moveTo(config) {\r\n var $element = config.$element;\r\n var position = config.position;\r\n var direction = config.direction || \"left\";\r\n var toConfig = {};\r\n var animationType;\r\n switch (direction) {\r\n case \"right\":\r\n toConfig.transform = \"translate(\" + position + \"px, 0px)\";\r\n animationType = \"custom\";\r\n break;\r\n case \"left\":\r\n toConfig.left = position;\r\n animationType = \"slide\";\r\n break;\r\n case \"top\":\r\n case \"bottom\":\r\n toConfig.top = position;\r\n animationType = \"slide\"\r\n }\r\n fx.animate($element, {\r\n type: animationType,\r\n to: toConfig,\r\n duration: config.duration,\r\n complete: config.complete\r\n })\r\n },\r\n margin(config) {\r\n var $element = config.$element;\r\n var margin = config.margin;\r\n var direction = config.direction || \"left\";\r\n var toConfig = {};\r\n toConfig[\"margin\" + camelize(direction, true)] = margin;\r\n fx.animate($element, {\r\n to: toConfig,\r\n duration: config.duration,\r\n complete: config.complete\r\n })\r\n },\r\n fade($element, config, duration, completeAction) {\r\n fx.animate($element, {\r\n type: \"fade\",\r\n to: config.to,\r\n from: config.from,\r\n duration: duration,\r\n complete: completeAction\r\n })\r\n },\r\n size(config) {\r\n var $element = config.$element;\r\n var size = config.size;\r\n var direction = config.direction || \"left\";\r\n var marginTop = config.marginTop || 0;\r\n var duration = config.duration;\r\n var toConfig = {};\r\n if (\"right\" === direction || \"left\" === direction) {\r\n toConfig.width = size\r\n } else {\r\n toConfig.height = size\r\n }\r\n if (\"bottom\" === direction) {\r\n toConfig.marginTop = marginTop\r\n }\r\n fx.animate($element, {\r\n to: toConfig,\r\n duration: duration,\r\n complete: config.complete\r\n })\r\n },\r\n complete($element) {\r\n fx.stop($element, true)\r\n }\r\n};\r\n","/**\r\n * DevExtreme (esm/ui/drawer/ui.drawer.rendering.strategy.js)\r\n * Version: 22.2.4\r\n * Build date: Thu Jan 19 2023\r\n *\r\n * Copyright (c) 2012 - 2023 Developer Express Inc. ALL RIGHTS RESERVED\r\n * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/\r\n */\r\nimport {\r\n setWidth,\r\n setHeight\r\n} from \"../../core/utils/size\";\r\nimport $ from \"../../core/renderer\";\r\nimport {\r\n animation\r\n} from \"./ui.drawer.animation\";\r\nimport {\r\n Deferred,\r\n when\r\n} from \"../../core/utils/deferred\";\r\nclass DrawerStrategy {\r\n constructor(drawer) {\r\n this._drawer = drawer\r\n }\r\n getDrawerInstance() {\r\n return this._drawer\r\n }\r\n renderPanelContent(whenPanelContentRendered) {\r\n var drawer = this.getDrawerInstance();\r\n var template = drawer._getTemplate(drawer.option(\"template\"));\r\n if (template) {\r\n template.render({\r\n container: drawer.content(),\r\n onRendered: () => {\r\n whenPanelContentRendered.resolve()\r\n }\r\n })\r\n }\r\n }\r\n renderPosition(changePositionUsingFxAnimation, animationDuration) {\r\n var whenPositionAnimationCompleted = new Deferred;\r\n var whenShaderAnimationCompleted = new Deferred;\r\n var drawer = this.getDrawerInstance();\r\n if (changePositionUsingFxAnimation) {\r\n when.apply($, [whenPositionAnimationCompleted, whenShaderAnimationCompleted]).done(() => {\r\n drawer._animationCompleteHandler()\r\n })\r\n }\r\n this._internalRenderPosition(changePositionUsingFxAnimation, whenPositionAnimationCompleted);\r\n if (!changePositionUsingFxAnimation) {\r\n drawer.resizeViewContent()\r\n }\r\n this.renderShaderVisibility(changePositionUsingFxAnimation, animationDuration, whenShaderAnimationCompleted)\r\n }\r\n _getPanelOffset(isDrawerOpened) {\r\n var drawer = this.getDrawerInstance();\r\n var size = drawer.isHorizontalDirection() ? drawer.getRealPanelWidth() : drawer.getRealPanelHeight();\r\n if (isDrawerOpened) {\r\n return -(size - drawer.getMaxSize())\r\n } else {\r\n return -(size - drawer.getMinSize())\r\n }\r\n }\r\n _getPanelSize(isDrawerOpened) {\r\n return isDrawerOpened ? this.getDrawerInstance().getMaxSize() : this.getDrawerInstance().getMinSize()\r\n }\r\n renderShaderVisibility(changePositionUsingFxAnimation, duration, whenAnimationCompleted) {\r\n var drawer = this.getDrawerInstance();\r\n var isShaderVisible = drawer.option(\"opened\");\r\n var fadeConfig = isShaderVisible ? {\r\n from: 0,\r\n to: 1\r\n } : {\r\n from: 1,\r\n to: 0\r\n };\r\n if (changePositionUsingFxAnimation) {\r\n animation.fade($(drawer._$shader), fadeConfig, duration, () => {\r\n this._drawer._toggleShaderVisibility(isShaderVisible);\r\n whenAnimationCompleted.resolve()\r\n })\r\n } else {\r\n drawer._toggleShaderVisibility(isShaderVisible);\r\n drawer._$shader.css(\"opacity\", fadeConfig.to)\r\n }\r\n }\r\n getPanelContent() {\r\n return $(this.getDrawerInstance().content())\r\n }\r\n setPanelSize(calcFromRealPanelSize) {\r\n this.refreshPanelElementSize(calcFromRealPanelSize)\r\n }\r\n refreshPanelElementSize(calcFromRealPanelSize) {\r\n var drawer = this.getDrawerInstance();\r\n var panelSize = this._getPanelSize(drawer.option(\"opened\"));\r\n if (drawer.isHorizontalDirection()) {\r\n setWidth($(drawer.content()), calcFromRealPanelSize ? drawer.getRealPanelWidth() : panelSize)\r\n } else {\r\n setHeight($(drawer.content()), calcFromRealPanelSize ? drawer.getRealPanelHeight() : panelSize)\r\n }\r\n }\r\n isViewContentFirst() {\r\n return false\r\n }\r\n onPanelContentRendered() {}\r\n}\r\nexport default DrawerStrategy;\r\n","/**\r\n * DevExtreme (esm/ui/drawer/ui.drawer.rendering.strategy.push.js)\r\n * Version: 22.2.4\r\n * Build date: Thu Jan 19 2023\r\n *\r\n * Copyright (c) 2012 - 2023 Developer Express Inc. ALL RIGHTS RESERVED\r\n * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/\r\n */\r\nimport {\r\n animation\r\n} from \"./ui.drawer.animation\";\r\nimport DrawerStrategy from \"./ui.drawer.rendering.strategy\";\r\nimport $ from \"../../core/renderer\";\r\nimport {\r\n move\r\n} from \"../../animation/translator\";\r\nclass PushStrategy extends DrawerStrategy {\r\n _internalRenderPosition(changePositionUsingFxAnimation, whenAnimationCompleted) {\r\n var drawer = this.getDrawerInstance();\r\n var openedPanelSize = this._getPanelSize(true);\r\n var contentPosition = this._getPanelSize(drawer.option(\"opened\")) * drawer._getPositionCorrection();\r\n $(drawer.content()).css(drawer.isHorizontalDirection() ? \"width\" : \"height\", openedPanelSize);\r\n if (drawer.getMinSize()) {\r\n var paddingCssPropertyName = \"padding\";\r\n switch (drawer.calcTargetPosition()) {\r\n case \"left\":\r\n paddingCssPropertyName += \"Right\";\r\n break;\r\n case \"right\":\r\n paddingCssPropertyName += \"Left\";\r\n break;\r\n case \"top\":\r\n paddingCssPropertyName += \"Bottom\";\r\n break;\r\n case \"bottom\":\r\n paddingCssPropertyName += \"Top\"\r\n }\r\n $(drawer.viewContent()).css(paddingCssPropertyName, drawer.getMinSize())\r\n }\r\n if (changePositionUsingFxAnimation) {\r\n animation.moveTo({\r\n $element: $(drawer.viewContent()),\r\n position: contentPosition,\r\n direction: drawer.calcTargetPosition(),\r\n duration: drawer.option(\"animationDuration\"),\r\n complete: () => {\r\n whenAnimationCompleted.resolve()\r\n }\r\n })\r\n } else if (drawer.isHorizontalDirection()) {\r\n move($(drawer.viewContent()), {\r\n left: contentPosition\r\n })\r\n } else {\r\n move($(drawer.viewContent()), {\r\n top: contentPosition\r\n })\r\n }\r\n }\r\n onPanelContentRendered() {\r\n $(this.getDrawerInstance().viewContent()).addClass(\"dx-theme-background-color\")\r\n }\r\n}\r\nexport default PushStrategy;\r\n","/**\r\n * DevExtreme (esm/ui/drawer/ui.drawer.rendering.strategy.shrink.js)\r\n * Version: 22.2.4\r\n * Build date: Thu Jan 19 2023\r\n *\r\n * Copyright (c) 2012 - 2023 Developer Express Inc. ALL RIGHTS RESERVED\r\n * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/\r\n */\r\nimport {\r\n animation\r\n} from \"./ui.drawer.animation\";\r\nimport DrawerStrategy from \"./ui.drawer.rendering.strategy\";\r\nimport $ from \"../../core/renderer\";\r\nimport {\r\n camelize\r\n} from \"../../core/utils/inflector\";\r\nclass ShrinkStrategy extends DrawerStrategy {\r\n _internalRenderPosition(changePositionUsingFxAnimation, whenAnimationCompleted) {\r\n var drawer = this.getDrawerInstance();\r\n var direction = drawer.calcTargetPosition();\r\n var $panel = $(drawer.content());\r\n var panelSize = this._getPanelSize(drawer.option(\"opened\"));\r\n var panelOffset = this._getPanelOffset(drawer.option(\"opened\"));\r\n var revealMode = drawer.option(\"revealMode\");\r\n if (changePositionUsingFxAnimation) {\r\n if (\"slide\" === revealMode) {\r\n animation.margin({\r\n complete: () => {\r\n whenAnimationCompleted.resolve()\r\n },\r\n $element: $panel,\r\n duration: drawer.option(\"animationDuration\"),\r\n direction: direction,\r\n margin: panelOffset\r\n })\r\n } else if (\"expand\" === revealMode) {\r\n animation.size({\r\n complete: () => {\r\n whenAnimationCompleted.resolve()\r\n },\r\n $element: $panel,\r\n duration: drawer.option(\"animationDuration\"),\r\n direction: direction,\r\n size: panelSize\r\n })\r\n }\r\n } else if (\"slide\" === revealMode) {\r\n $panel.css(\"margin\" + camelize(direction, true), panelOffset)\r\n } else if (\"expand\" === revealMode) {\r\n $panel.css(drawer.isHorizontalDirection() ? \"width\" : \"height\", panelSize)\r\n }\r\n }\r\n isViewContentFirst(position, isRtl) {\r\n return (isRtl ? \"left\" === position : \"right\" === position) || \"bottom\" === position\r\n }\r\n}\r\nexport default ShrinkStrategy;\r\n","/**\r\n * DevExtreme (esm/ui/drawer/ui.drawer.rendering.strategy.overlap.js)\r\n * Version: 22.2.4\r\n * Build date: Thu Jan 19 2023\r\n *\r\n * Copyright (c) 2012 - 2023 Developer Express Inc. ALL RIGHTS RESERVED\r\n * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/\r\n */\r\nimport {\r\n getWidth\r\n} from \"../../core/utils/size\";\r\nimport {\r\n animation\r\n} from \"./ui.drawer.animation\";\r\nimport DrawerStrategy from \"./ui.drawer.rendering.strategy\";\r\nimport $ from \"../../core/renderer\";\r\nimport {\r\n move\r\n} from \"../../animation/translator\";\r\nimport Overlay from \"../overlay/ui.overlay\";\r\nimport {\r\n ensureDefined\r\n} from \"../../core/utils/common\";\r\nimport {\r\n camelize\r\n} from \"../../core/utils/inflector\";\r\nclass OverlapStrategy extends DrawerStrategy {\r\n renderPanelContent(whenPanelContentRendered) {\r\n delete this._initialPosition;\r\n var drawer = this.getDrawerInstance();\r\n var {\r\n opened: opened,\r\n minSize: minSize\r\n } = drawer.option();\r\n drawer._overlay = drawer._createComponent(drawer.content(), Overlay, {\r\n shading: false,\r\n container: drawer.content(),\r\n visualContainer: drawer.getOverlayTarget(),\r\n position: this._getOverlayPosition(),\r\n width: opened ? \"auto\" : minSize || 0,\r\n height: \"100%\",\r\n templatesRenderAsynchronously: drawer.option(\"templatesRenderAsynchronously\"),\r\n animation: {\r\n show: {\r\n duration: 0\r\n }\r\n },\r\n onPositioned: function(e) {\r\n this._fixOverlayPosition(e.component.$content())\r\n }.bind(this),\r\n contentTemplate: drawer.option(\"template\"),\r\n onContentReady: args => {\r\n whenPanelContentRendered.resolve();\r\n this._processOverlayZIndex(args.component.content())\r\n },\r\n visible: true,\r\n propagateOutsideClick: true\r\n })\r\n }\r\n _fixOverlayPosition($overlayContent) {\r\n var position = ensureDefined(this._initialPosition, {\r\n left: 0,\r\n top: 0\r\n });\r\n move($overlayContent, position);\r\n if (\"right\" === this.getDrawerInstance().calcTargetPosition()) {\r\n $overlayContent.css(\"left\", \"auto\")\r\n }\r\n if (\"bottom\" === this.getDrawerInstance().calcTargetPosition()) {\r\n $overlayContent.css(\"top\", \"auto\");\r\n $overlayContent.css(\"bottom\", \"0px\")\r\n }\r\n }\r\n _getOverlayPosition() {\r\n var drawer = this.getDrawerInstance();\r\n var panelPosition = drawer.calcTargetPosition();\r\n var result = {};\r\n switch (panelPosition) {\r\n case \"left\":\r\n result = {\r\n my: \"top left\",\r\n at: \"top left\"\r\n };\r\n break;\r\n case \"right\":\r\n result = {\r\n my: drawer.option(\"rtlEnabled\") ? \"top left\" : \"top right\",\r\n at: \"top right\"\r\n };\r\n break;\r\n case \"top\":\r\n case \"bottom\":\r\n result = {\r\n my: panelPosition,\r\n at: panelPosition\r\n }\r\n }\r\n result.of = drawer.getOverlayTarget();\r\n return result\r\n }\r\n refreshPanelElementSize(calcFromRealPanelSize) {\r\n var drawer = this.getDrawerInstance();\r\n var overlay = drawer.getOverlay();\r\n if (drawer.isHorizontalDirection()) {\r\n overlay.option(\"height\", \"100%\");\r\n overlay.option(\"width\", calcFromRealPanelSize ? drawer.getRealPanelWidth() : this._getPanelSize(drawer.option(\"opened\")))\r\n } else {\r\n overlay.option(\"width\", getWidth(drawer.getOverlayTarget()));\r\n overlay.option(\"height\", calcFromRealPanelSize ? drawer.getRealPanelHeight() : this._getPanelSize(drawer.option(\"opened\")))\r\n }\r\n }\r\n onPanelContentRendered() {\r\n this._updateViewContentStyles()\r\n }\r\n _updateViewContentStyles() {\r\n var drawer = this.getDrawerInstance();\r\n $(drawer.viewContent()).css(\"padding\" + camelize(drawer.calcTargetPosition(), true), drawer.option(\"minSize\"));\r\n $(drawer.viewContent()).css(\"transform\", \"inherit\")\r\n }\r\n _internalRenderPosition(changePositionUsingFxAnimation, whenAnimationCompleted) {\r\n var drawer = this.getDrawerInstance();\r\n var $panel = $(drawer.content());\r\n var $panelOverlayContent = drawer.getOverlay().$content();\r\n var revealMode = drawer.option(\"revealMode\");\r\n var targetPanelPosition = drawer.calcTargetPosition();\r\n var panelSize = this._getPanelSize(drawer.option(\"opened\"));\r\n var panelOffset = this._getPanelOffset(drawer.option(\"opened\")) * drawer._getPositionCorrection();\r\n var marginTop = drawer.getRealPanelHeight() - panelSize;\r\n this._updateViewContentStyles();\r\n if (changePositionUsingFxAnimation) {\r\n if (\"slide\" === revealMode) {\r\n this._initialPosition = drawer.isHorizontalDirection() ? {\r\n left: panelOffset\r\n } : {\r\n top: panelOffset\r\n };\r\n animation.moveTo({\r\n complete: () => {\r\n whenAnimationCompleted.resolve()\r\n },\r\n duration: drawer.option(\"animationDuration\"),\r\n direction: targetPanelPosition,\r\n $element: $panel,\r\n position: panelOffset\r\n })\r\n } else if (\"expand\" === revealMode) {\r\n this._initialPosition = {\r\n left: 0\r\n };\r\n move($panelOverlayContent, this._initialPosition);\r\n animation.size({\r\n complete: () => {\r\n whenAnimationCompleted.resolve()\r\n },\r\n duration: drawer.option(\"animationDuration\"),\r\n direction: targetPanelPosition,\r\n $element: $panelOverlayContent,\r\n size: panelSize,\r\n marginTop: marginTop\r\n })\r\n }\r\n } else if (\"slide\" === revealMode) {\r\n this._initialPosition = drawer.isHorizontalDirection() ? {\r\n left: panelOffset\r\n } : {\r\n top: panelOffset\r\n };\r\n move($panel, this._initialPosition)\r\n } else if (\"expand\" === revealMode) {\r\n this._initialPosition = {\r\n left: 0\r\n };\r\n move($panelOverlayContent, this._initialPosition);\r\n if (drawer.isHorizontalDirection()) {\r\n $($panelOverlayContent).css(\"width\", panelSize)\r\n } else {\r\n $($panelOverlayContent).css(\"height\", panelSize);\r\n if (\"bottom\" === targetPanelPosition) {\r\n $($panelOverlayContent).css(\"marginTop\", marginTop)\r\n }\r\n }\r\n }\r\n }\r\n getPanelContent() {\r\n return $(this.getDrawerInstance().getOverlay().content())\r\n }\r\n _processOverlayZIndex($element) {\r\n var styles = $($element).get(0).style;\r\n var zIndex = styles.zIndex || 1;\r\n this.getDrawerInstance().setZIndex(zIndex)\r\n }\r\n isViewContentFirst(position) {\r\n return \"right\" === position || \"bottom\" === position\r\n }\r\n}\r\nexport default OverlapStrategy;\r\n","/**\r\n * DevExtreme (esm/ui/drawer/ui.drawer.js)\r\n * Version: 22.2.4\r\n * Build date: Thu Jan 19 2023\r\n *\r\n * Copyright (c) 2012 - 2023 Developer Express Inc. ALL RIGHTS RESERVED\r\n * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/\r\n */\r\nimport $ from \"../../core/renderer\";\r\nimport eventsEngine from \"../../events/core/events_engine\";\r\nimport {\r\n isFunction,\r\n isDefined\r\n} from \"../../core/utils/type\";\r\nimport {\r\n getPublicElement\r\n} from \"../../core/element\";\r\nimport registerComponent from \"../../core/component_registrator\";\r\nimport {\r\n extend\r\n} from \"../../core/utils/extend\";\r\nimport {\r\n getBoundingRect\r\n} from \"../../core/utils/position\";\r\nimport Widget from \"../widget/ui.widget\";\r\nimport {\r\n EmptyTemplate\r\n} from \"../../core/templates/empty_template\";\r\nimport {\r\n hasWindow\r\n} from \"../../core/utils/window\";\r\nimport PushStrategy from \"./ui.drawer.rendering.strategy.push\";\r\nimport ShrinkStrategy from \"./ui.drawer.rendering.strategy.shrink\";\r\nimport OverlapStrategy from \"./ui.drawer.rendering.strategy.overlap\";\r\nimport {\r\n animation\r\n} from \"./ui.drawer.animation\";\r\nimport {\r\n name as CLICK_EVENT_NAME\r\n} from \"../../events/click\";\r\nimport fx from \"../../animation/fx\";\r\nimport {\r\n Deferred\r\n} from \"../../core/utils/deferred\";\r\nimport {\r\n triggerResizeEvent\r\n} from \"../../events/visibility_change\";\r\nvar DRAWER_CLASS = \"dx-drawer\";\r\nvar DRAWER_WRAPPER_CLASS = \"dx-drawer-wrapper\";\r\nvar DRAWER_PANEL_CONTENT_CLASS = \"dx-drawer-panel-content\";\r\nvar DRAWER_VIEW_CONTENT_CLASS = \"dx-drawer-content\";\r\nvar DRAWER_SHADER_CLASS = \"dx-drawer-shader\";\r\nvar INVISIBLE_STATE_CLASS = \"dx-state-invisible\";\r\nvar OPENED_STATE_CLASS = \"dx-drawer-opened\";\r\nvar ANONYMOUS_TEMPLATE_NAME = \"content\";\r\nvar PANEL_TEMPLATE_NAME = \"panel\";\r\nvar Drawer = Widget.inherit({\r\n _getDefaultOptions() {\r\n return extend(this.callBase(), {\r\n position: \"left\",\r\n opened: false,\r\n minSize: null,\r\n maxSize: null,\r\n shading: false,\r\n template: PANEL_TEMPLATE_NAME,\r\n openedStateMode: \"shrink\",\r\n revealMode: \"slide\",\r\n animationEnabled: true,\r\n animationDuration: 400,\r\n closeOnOutsideClick: false,\r\n contentTemplate: ANONYMOUS_TEMPLATE_NAME\r\n })\r\n },\r\n _init() {\r\n this.callBase();\r\n this._initStrategy();\r\n this.$element().addClass(DRAWER_CLASS);\r\n this._whenAnimationCompleted = void 0;\r\n this._whenPanelContentRendered = void 0;\r\n this._whenPanelContentRefreshed = void 0;\r\n this._$wrapper = $(\"
\").addClass(DRAWER_WRAPPER_CLASS);\r\n this._$viewContentWrapper = $(\"
\").addClass(DRAWER_VIEW_CONTENT_CLASS);\r\n this._$wrapper.append(this._$viewContentWrapper);\r\n this.$element().append(this._$wrapper)\r\n },\r\n _initStrategy() {\r\n switch (this.option(\"openedStateMode\")) {\r\n case \"push\":\r\n this._strategy = new PushStrategy(this);\r\n break;\r\n case \"shrink\":\r\n this._strategy = new ShrinkStrategy(this);\r\n break;\r\n case \"overlap\":\r\n this._strategy = new OverlapStrategy(this);\r\n break;\r\n default:\r\n this._strategy = new PushStrategy(this)\r\n }\r\n },\r\n _getAnonymousTemplateName: function() {\r\n return ANONYMOUS_TEMPLATE_NAME\r\n },\r\n _initTemplates() {\r\n var defaultTemplates = {};\r\n defaultTemplates[PANEL_TEMPLATE_NAME] = new EmptyTemplate;\r\n defaultTemplates[ANONYMOUS_TEMPLATE_NAME] = new EmptyTemplate;\r\n this._templateManager.addDefaultTemplates(defaultTemplates);\r\n this.callBase()\r\n },\r\n _viewContentWrapperClickHandler(e) {\r\n var closeOnOutsideClick = this.option(\"closeOnOutsideClick\");\r\n if (isFunction(closeOnOutsideClick)) {\r\n closeOnOutsideClick = closeOnOutsideClick(e)\r\n }\r\n if (closeOnOutsideClick && this.option(\"opened\")) {\r\n this.stopAnimations();\r\n if (this.option(\"shading\")) {\r\n e.preventDefault()\r\n }\r\n this.hide()\r\n }\r\n },\r\n _initMarkup() {\r\n this.callBase();\r\n this._toggleOpenedStateClass(this.option(\"opened\"));\r\n this._renderPanelContentWrapper();\r\n this._refreshOpenedStateModeClass();\r\n this._refreshRevealModeClass();\r\n this._renderShader();\r\n this._refreshPositionClass();\r\n this._whenPanelContentRendered = new Deferred;\r\n this._strategy.renderPanelContent(this._whenPanelContentRendered);\r\n this._strategy.onPanelContentRendered();\r\n this._renderViewContent();\r\n eventsEngine.off(this._$viewContentWrapper, CLICK_EVENT_NAME);\r\n eventsEngine.on(this._$viewContentWrapper, CLICK_EVENT_NAME, this._viewContentWrapperClickHandler.bind(this));\r\n this._refreshWrapperChildrenOrder()\r\n },\r\n _render() {\r\n this._initMinMaxSize();\r\n this.callBase();\r\n this._whenPanelContentRendered.always(() => {\r\n this._initMinMaxSize();\r\n this._strategy.refreshPanelElementSize(\"slide\" === this.option(\"revealMode\") || !this.isHorizontalDirection());\r\n this._renderPosition(this.option(\"opened\"), true);\r\n this._removePanelManualPosition()\r\n })\r\n },\r\n _removePanelManualPosition() {\r\n if (this._$panelContentWrapper.attr(\"manualposition\")) {\r\n this._$panelContentWrapper.removeAttr(\"manualPosition\");\r\n this._$panelContentWrapper.css({\r\n position: \"\",\r\n top: \"\",\r\n left: \"\",\r\n right: \"\",\r\n bottom: \"\"\r\n })\r\n }\r\n },\r\n _renderPanelContentWrapper() {\r\n this._$panelContentWrapper = $(\"
\").addClass(DRAWER_PANEL_CONTENT_CLASS);\r\n var position = this.calcTargetPosition();\r\n if (\"push\" === this.option(\"openedStateMode\") && [\"top\", \"bottom\"].indexOf(position) > -1) {\r\n this._$panelContentWrapper.addClass(DRAWER_PANEL_CONTENT_CLASS + \"-push-top-or-bottom\")\r\n }\r\n if (\"overlap\" !== this.option(\"openedStateMode\") && !this.option(\"opened\") && !this.option(\"minSize\")) {\r\n this._$panelContentWrapper.attr(\"manualposition\", true);\r\n this._$panelContentWrapper.css({\r\n position: \"absolute\",\r\n top: \"-10000px\",\r\n left: \"-10000px\",\r\n right: \"auto\",\r\n bottom: \"auto\"\r\n })\r\n }\r\n this._$wrapper.append(this._$panelContentWrapper)\r\n },\r\n _refreshOpenedStateModeClass(prevOpenedStateMode) {\r\n if (prevOpenedStateMode) {\r\n this.$element().removeClass(DRAWER_CLASS + \"-\" + prevOpenedStateMode)\r\n }\r\n this.$element().addClass(DRAWER_CLASS + \"-\" + this.option(\"openedStateMode\"))\r\n },\r\n _refreshPositionClass(prevPosition) {\r\n if (prevPosition) {\r\n this.$element().removeClass(DRAWER_CLASS + \"-\" + prevPosition)\r\n }\r\n this.$element().addClass(DRAWER_CLASS + \"-\" + this.calcTargetPosition())\r\n },\r\n _refreshWrapperChildrenOrder() {\r\n var position = this.calcTargetPosition();\r\n if (this._strategy.isViewContentFirst(position, this.option(\"rtlEnabled\"))) {\r\n this._$wrapper.prepend(this._$viewContentWrapper)\r\n } else {\r\n this._$wrapper.prepend(this._$panelContentWrapper)\r\n }\r\n },\r\n _refreshRevealModeClass(prevRevealMode) {\r\n if (prevRevealMode) {\r\n this.$element().removeClass(DRAWER_CLASS + \"-\" + prevRevealMode)\r\n }\r\n this.$element().addClass(DRAWER_CLASS + \"-\" + this.option(\"revealMode\"))\r\n },\r\n _renderViewContent() {\r\n var contentTemplateOption = this.option(\"contentTemplate\");\r\n var contentTemplate = this._getTemplate(contentTemplateOption);\r\n if (contentTemplate) {\r\n var $viewTemplate = contentTemplate.render({\r\n container: this.viewContent(),\r\n noModel: true,\r\n transclude: this._templateManager.anonymousTemplateName === contentTemplateOption\r\n });\r\n if ($viewTemplate.hasClass(\"ng-scope\")) {\r\n $(this._$viewContentWrapper).children().not(\".\".concat(DRAWER_SHADER_CLASS)).replaceWith($viewTemplate)\r\n }\r\n }\r\n },\r\n _renderShader() {\r\n this._$shader = this._$shader || $(\"
\").addClass(DRAWER_SHADER_CLASS);\r\n this._$shader.appendTo(this.viewContent());\r\n this._toggleShaderVisibility(this.option(\"opened\"))\r\n },\r\n _initSize() {\r\n this._initMinMaxSize()\r\n },\r\n _initMinMaxSize() {\r\n var realPanelSize = this.isHorizontalDirection() ? this.getRealPanelWidth() : this.getRealPanelHeight();\r\n this._maxSize = this.option(\"maxSize\") || realPanelSize;\r\n this._minSize = this.option(\"minSize\") || 0\r\n },\r\n calcTargetPosition() {\r\n var position = this.option(\"position\");\r\n var rtl = this.option(\"rtlEnabled\");\r\n var result = position;\r\n if (\"before\" === position) {\r\n result = rtl ? \"right\" : \"left\"\r\n } else if (\"after\" === position) {\r\n result = rtl ? \"left\" : \"right\"\r\n }\r\n return result\r\n },\r\n getOverlayTarget() {\r\n return this._$wrapper\r\n },\r\n getOverlay() {\r\n return this._overlay\r\n },\r\n getMaxSize() {\r\n return this._maxSize\r\n },\r\n getMinSize() {\r\n return this._minSize\r\n },\r\n getRealPanelWidth() {\r\n if (hasWindow()) {\r\n if (isDefined(this.option(\"templateSize\"))) {\r\n return this.option(\"templateSize\")\r\n } else {\r\n return getBoundingRect(this._getPanelTemplateElement()).width\r\n }\r\n } else {\r\n return 0\r\n }\r\n },\r\n getRealPanelHeight() {\r\n if (hasWindow()) {\r\n if (isDefined(this.option(\"templateSize\"))) {\r\n return this.option(\"templateSize\")\r\n } else {\r\n return getBoundingRect(this._getPanelTemplateElement()).height\r\n }\r\n } else {\r\n return 0\r\n }\r\n },\r\n _getPanelTemplateElement() {\r\n var $panelContent = this._strategy.getPanelContent();\r\n var $result = $panelContent;\r\n if ($panelContent.children().length) {\r\n $result = $panelContent.children().eq(0);\r\n if ($panelContent.hasClass(\"dx-overlay-content\") && $result.hasClass(\"dx-template-wrapper\") && $result.children().length) {\r\n $result = $result.children().eq(0)\r\n }\r\n }\r\n return $result.get(0)\r\n },\r\n getElementHeight($element) {\r\n var $children = $element.children();\r\n return $children.length ? getBoundingRect($children.eq(0).get(0)).height : getBoundingRect($element.get(0)).height\r\n },\r\n isHorizontalDirection() {\r\n var position = this.calcTargetPosition();\r\n return \"left\" === position || \"right\" === position\r\n },\r\n stopAnimations(jumpToEnd) {\r\n fx.stop(this._$shader, jumpToEnd);\r\n fx.stop($(this.content()), jumpToEnd);\r\n fx.stop($(this.viewContent()), jumpToEnd);\r\n var overlay = this.getOverlay();\r\n if (overlay) {\r\n fx.stop($(overlay.$content()), jumpToEnd)\r\n }\r\n },\r\n setZIndex(zIndex) {\r\n this._$shader.css(\"zIndex\", zIndex - 1);\r\n this._$panelContentWrapper.css(\"zIndex\", zIndex)\r\n },\r\n resizeContent() {\r\n this.resizeViewContent\r\n },\r\n resizeViewContent() {\r\n triggerResizeEvent(this.viewContent())\r\n },\r\n _isInvertedPosition() {\r\n var position = this.calcTargetPosition();\r\n return \"right\" === position || \"bottom\" === position\r\n },\r\n _renderPosition(isDrawerOpened, disableAnimation, jumpToEnd) {\r\n this.stopAnimations(jumpToEnd);\r\n if (!hasWindow()) {\r\n return\r\n }\r\n $(this.viewContent()).css(\"paddingLeft\", 0);\r\n $(this.viewContent()).css(\"paddingRight\", 0);\r\n $(this.viewContent()).css(\"paddingTop\", 0);\r\n $(this.viewContent()).css(\"paddingBottom\", 0);\r\n var animationEnabled = this.option(\"animationEnabled\");\r\n if (true === disableAnimation) {\r\n animationEnabled = false\r\n }\r\n if (isDrawerOpened) {\r\n this._toggleShaderVisibility(isDrawerOpened)\r\n }\r\n this._strategy.renderPosition(animationEnabled, this.option(\"animationDuration\"))\r\n },\r\n _animationCompleteHandler() {\r\n this.resizeViewContent();\r\n if (this._whenAnimationCompleted) {\r\n this._whenAnimationCompleted.resolve()\r\n }\r\n },\r\n _getPositionCorrection() {\r\n return this._isInvertedPosition() ? -1 : 1\r\n },\r\n _dispose() {\r\n animation.complete($(this.viewContent()));\r\n this.callBase()\r\n },\r\n _visibilityChanged(visible) {\r\n if (visible) {\r\n this._dimensionChanged()\r\n }\r\n },\r\n _dimensionChanged() {\r\n this._initMinMaxSize();\r\n this._strategy.refreshPanelElementSize(\"slide\" === this.option(\"revealMode\"));\r\n this._renderPosition(this.option(\"opened\"), true)\r\n },\r\n _toggleShaderVisibility(visible) {\r\n if (this.option(\"shading\")) {\r\n this._$shader.toggleClass(INVISIBLE_STATE_CLASS, !visible);\r\n this._$shader.css(\"visibility\", visible ? \"visible\" : \"hidden\")\r\n } else {\r\n this._$shader.toggleClass(INVISIBLE_STATE_CLASS, true)\r\n }\r\n },\r\n _toggleOpenedStateClass(opened) {\r\n this.$element().toggleClass(OPENED_STATE_CLASS, opened)\r\n },\r\n _refreshPanel() {\r\n $(this.viewContent()).css(\"left\", 0);\r\n $(this.viewContent()).css(\"transform\", \"translate(0px, 0px)\");\r\n $(this.viewContent()).removeClass(\"dx-theme-background-color\");\r\n this._removePanelContentWrapper();\r\n this._removeOverlay();\r\n this._renderPanelContentWrapper();\r\n this._refreshWrapperChildrenOrder();\r\n this._whenPanelContentRefreshed = new Deferred;\r\n this._strategy.renderPanelContent(this._whenPanelContentRefreshed);\r\n this._strategy.onPanelContentRendered();\r\n if (hasWindow()) {\r\n this._whenPanelContentRefreshed.always(() => {\r\n this._strategy.refreshPanelElementSize(\"slide\" === this.option(\"revealMode\"));\r\n this._renderPosition(this.option(\"opened\"), true, true);\r\n this._removePanelManualPosition()\r\n })\r\n }\r\n },\r\n _clean() {\r\n this._cleanFocusState();\r\n this._removePanelContentWrapper();\r\n this._removeOverlay()\r\n },\r\n _removePanelContentWrapper() {\r\n if (this._$panelContentWrapper) {\r\n this._$panelContentWrapper.remove()\r\n }\r\n },\r\n _removeOverlay() {\r\n if (this._overlay) {\r\n this._overlay.dispose();\r\n delete this._overlay;\r\n delete this._$panelContentWrapper\r\n }\r\n },\r\n _optionChanged(args) {\r\n switch (args.name) {\r\n case \"width\":\r\n this.callBase(args);\r\n this._dimensionChanged();\r\n break;\r\n case \"opened\":\r\n this._renderPosition(this.option(\"opened\"));\r\n this._toggleOpenedStateClass(args.value);\r\n break;\r\n case \"position\":\r\n this._refreshPositionClass(args.previousValue);\r\n this._refreshWrapperChildrenOrder();\r\n this._invalidate();\r\n break;\r\n case \"contentTemplate\":\r\n case \"template\":\r\n this._invalidate();\r\n break;\r\n case \"openedStateMode\":\r\n this._initStrategy();\r\n this._refreshOpenedStateModeClass(args.previousValue);\r\n this._refreshPanel();\r\n break;\r\n case \"minSize\":\r\n case \"maxSize\":\r\n this._initMinMaxSize();\r\n this._renderPosition(this.option(\"opened\"), true);\r\n break;\r\n case \"revealMode\":\r\n this._refreshRevealModeClass(args.previousValue);\r\n this._refreshPanel();\r\n break;\r\n case \"shading\":\r\n this._toggleShaderVisibility(this.option(\"opened\"));\r\n break;\r\n case \"animationEnabled\":\r\n case \"animationDuration\":\r\n case \"closeOnOutsideClick\":\r\n break;\r\n default:\r\n this.callBase(args)\r\n }\r\n },\r\n content() {\r\n return getPublicElement(this._$panelContentWrapper)\r\n },\r\n viewContent() {\r\n return getPublicElement(this._$viewContentWrapper)\r\n },\r\n show() {\r\n return this.toggle(true)\r\n },\r\n hide() {\r\n return this.toggle(false)\r\n },\r\n toggle(opened) {\r\n var targetOpened = void 0 === opened ? !this.option(\"opened\") : opened;\r\n this._whenAnimationCompleted = new Deferred;\r\n this.option(\"opened\", targetOpened);\r\n return this._whenAnimationCompleted.promise()\r\n }\r\n});\r\nregisterComponent(\"dxDrawer\", Drawer);\r\nexport default Drawer;\r\n","/**\r\n * DevExtreme (esm/ui/drawer.js)\r\n * Version: 22.2.4\r\n * Build date: Thu Jan 19 2023\r\n *\r\n * Copyright (c) 2012 - 2023 Developer Express Inc. ALL RIGHTS RESERVED\r\n * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/\r\n */\r\nimport Drawer from \"./drawer/ui.drawer\";\r\nexport default Drawer;\r\n","/**\r\n * DevExtreme (esm/ui/drop_down_editor/ui.drop_down_button.js)\r\n * Version: 22.2.4\r\n * Build date: Thu Jan 19 2023\r\n *\r\n * Copyright (c) 2012 - 2023 Developer Express Inc. ALL RIGHTS RESERVED\r\n * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/\r\n */\r\nimport $ from \"../../core/renderer\";\r\nimport {\r\n extend\r\n} from \"../../core/utils/extend\";\r\nimport eventsEngine from \"../../events/core/events_engine\";\r\nimport messageLocalization from \"../../localization/message\";\r\nimport TextEditorButton from \"../text_box/texteditor_button_collection/button\";\r\nimport Button from \"../button\";\r\nvar DROP_DOWN_EDITOR_BUTTON_CLASS = \"dx-dropdowneditor-button\";\r\nvar DROP_DOWN_EDITOR_BUTTON_VISIBLE = \"dx-dropdowneditor-button-visible\";\r\nvar BUTTON_MESSAGE = \"dxDropDownEditor-selectLabel\";\r\nexport default class DropDownButton extends TextEditorButton {\r\n constructor(name, editor, options) {\r\n super(name, editor, options);\r\n this.currentTemplate = null\r\n }\r\n _attachEvents(instance) {\r\n var {\r\n editor: editor\r\n } = this;\r\n instance.option(\"onClick\", e => {\r\n !editor.option(\"openOnFieldClick\") && editor._openHandler(e)\r\n });\r\n eventsEngine.on(instance.$element(), \"mousedown\", e => {\r\n if (editor.$element().is(\".dx-state-focused\")) {\r\n e.preventDefault()\r\n }\r\n })\r\n }\r\n _create() {\r\n var {\r\n editor: editor\r\n } = this;\r\n var $element = $(\"
\");\r\n var options = this._getOptions();\r\n this._addToContainer($element);\r\n var instance = editor._createComponent($element, Button, extend({}, options, {\r\n elementAttr: {\r\n \"aria-label\": messageLocalization.format(BUTTON_MESSAGE)\r\n }\r\n }));\r\n this._legacyRender(editor.$element(), $element, options.visible);\r\n return {\r\n $element: $element,\r\n instance: instance\r\n }\r\n }\r\n _getOptions() {\r\n var {\r\n editor: editor\r\n } = this;\r\n var visible = this._isVisible();\r\n var isReadOnly = editor.option(\"readOnly\");\r\n var options = {\r\n focusStateEnabled: false,\r\n hoverStateEnabled: false,\r\n activeStateEnabled: false,\r\n useInkRipple: false,\r\n disabled: isReadOnly,\r\n visible: visible\r\n };\r\n this._addTemplate(options);\r\n return options\r\n }\r\n _isVisible() {\r\n var {\r\n editor: editor\r\n } = this;\r\n return super._isVisible() && editor.option(\"showDropDownButton\")\r\n }\r\n _legacyRender($editor, $element, isVisible) {\r\n $editor.toggleClass(DROP_DOWN_EDITOR_BUTTON_VISIBLE, isVisible);\r\n if ($element) {\r\n $element.removeClass(\"dx-button\").addClass(DROP_DOWN_EDITOR_BUTTON_CLASS)\r\n }\r\n }\r\n _isSameTemplate() {\r\n return this.editor.option(\"dropDownButtonTemplate\") === this.currentTemplate\r\n }\r\n _addTemplate(options) {\r\n if (!this._isSameTemplate()) {\r\n options.template = this.editor._getTemplateByOption(\"dropDownButtonTemplate\");\r\n this.currentTemplate = this.editor.option(\"dropDownButtonTemplate\")\r\n }\r\n }\r\n update() {\r\n var shouldUpdate = super.update();\r\n if (shouldUpdate) {\r\n var {\r\n editor: editor,\r\n instance: instance\r\n } = this;\r\n var $editor = editor.$element();\r\n var options = this._getOptions();\r\n null === instance || void 0 === instance ? void 0 : instance.option(options);\r\n this._legacyRender($editor, null === instance || void 0 === instance ? void 0 : instance.$element(), options.visible)\r\n }\r\n }\r\n}\r\n","/**\r\n * DevExtreme (esm/ui/drop_down_editor/ui.drop_down_editor.js)\r\n * Version: 22.2.4\r\n * Build date: Thu Jan 19 2023\r\n *\r\n * Copyright (c) 2012 - 2023 Developer Express Inc. ALL RIGHTS RESERVED\r\n * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/\r\n */\r\nimport $ from \"../../core/renderer\";\r\nimport eventsEngine from \"../../events/core/events_engine\";\r\nimport Guid from \"../../core/guid\";\r\nimport registerComponent from \"../../core/component_registrator\";\r\nimport {\r\n noop,\r\n splitPair\r\n} from \"../../core/utils/common\";\r\nimport {\r\n focused\r\n} from \"../widget/selectors\";\r\nimport {\r\n each\r\n} from \"../../core/utils/iterator\";\r\nimport {\r\n isDefined\r\n} from \"../../core/utils/type\";\r\nimport {\r\n extend\r\n} from \"../../core/utils/extend\";\r\nimport {\r\n getPublicElement\r\n} from \"../../core/element\";\r\nimport errors from \"../widget/ui.errors\";\r\nimport animationPosition from \"../../animation/position\";\r\nimport {\r\n getDefaultAlignment\r\n} from \"../../core/utils/position\";\r\nimport DropDownButton from \"./ui.drop_down_button\";\r\nimport Widget from \"../widget/ui.widget\";\r\nimport messageLocalization from \"../../localization/message\";\r\nimport {\r\n addNamespace,\r\n isCommandKeyPressed\r\n} from \"../../events/utils/index\";\r\nimport TextBox from \"../text_box\";\r\nimport {\r\n name as clickEventName\r\n} from \"../../events/click\";\r\nimport devices from \"../../core/devices\";\r\nimport {\r\n FunctionTemplate\r\n} from \"../../core/templates/function_template\";\r\nimport Popup from \"../popup/ui.popup\";\r\nimport {\r\n hasWindow\r\n} from \"../../core/utils/window\";\r\nimport {\r\n getElementWidth,\r\n getSizeValue\r\n} from \"./utils\";\r\nimport {\r\n locate,\r\n move\r\n} from \"../../animation/translator\";\r\nvar DROP_DOWN_EDITOR_CLASS = \"dx-dropdowneditor\";\r\nvar DROP_DOWN_EDITOR_INPUT_WRAPPER = \"dx-dropdowneditor-input-wrapper\";\r\nvar DROP_DOWN_EDITOR_BUTTON_ICON = \"dx-dropdowneditor-icon\";\r\nvar DROP_DOWN_EDITOR_OVERLAY = \"dx-dropdowneditor-overlay\";\r\nvar DROP_DOWN_EDITOR_OVERLAY_FLIPPED = \"dx-dropdowneditor-overlay-flipped\";\r\nvar DROP_DOWN_EDITOR_ACTIVE = \"dx-dropdowneditor-active\";\r\nvar DROP_DOWN_EDITOR_FIELD_CLICKABLE = \"dx-dropdowneditor-field-clickable\";\r\nvar DROP_DOWN_EDITOR_FIELD_TEMPLATE_WRAPPER = \"dx-dropdowneditor-field-template-wrapper\";\r\nvar isIOs = \"ios\" === devices.current().platform;\r\nvar DropDownEditor = TextBox.inherit({\r\n _supportedKeys: function() {\r\n return extend({}, this.callBase(), {\r\n tab: function(e) {\r\n if (!this.option(\"opened\")) {\r\n return\r\n }\r\n if (\"instantly\" === this.option(\"applyValueMode\")) {\r\n this.close();\r\n return\r\n }\r\n var $focusableElement = e.shiftKey ? this._getLastPopupElement() : this._getFirstPopupElement();\r\n if ($focusableElement) {\r\n eventsEngine.trigger($focusableElement, \"focus\");\r\n $focusableElement.select()\r\n }\r\n e.preventDefault()\r\n },\r\n escape: function(e) {\r\n if (this.option(\"opened\")) {\r\n e.preventDefault()\r\n }\r\n this.close();\r\n return true\r\n },\r\n upArrow: function(e) {\r\n if (!isCommandKeyPressed(e)) {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n if (e.altKey) {\r\n this.close();\r\n return false\r\n }\r\n }\r\n return true\r\n },\r\n downArrow: function(e) {\r\n if (!isCommandKeyPressed(e)) {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n if (e.altKey) {\r\n this._validatedOpening();\r\n return false\r\n }\r\n }\r\n return true\r\n },\r\n enter: function(e) {\r\n if (this.option(\"opened\")) {\r\n e.preventDefault();\r\n this._valueChangeEventHandler(e)\r\n }\r\n return true\r\n }\r\n })\r\n },\r\n _getDefaultButtons: function() {\r\n return this.callBase().concat([{\r\n name: \"dropDown\",\r\n Ctor: DropDownButton\r\n }])\r\n },\r\n _getDefaultOptions: function() {\r\n return extend(this.callBase(), {\r\n value: null,\r\n onOpened: null,\r\n onClosed: null,\r\n opened: false,\r\n acceptCustomValue: true,\r\n applyValueMode: \"instantly\",\r\n deferRendering: true,\r\n activeStateEnabled: true,\r\n dropDownButtonTemplate: \"dropDownButton\",\r\n fieldTemplate: null,\r\n openOnFieldClick: false,\r\n showDropDownButton: true,\r\n buttons: void 0,\r\n dropDownOptions: {\r\n showTitle: false\r\n },\r\n popupPosition: this._getDefaultPopupPosition(),\r\n onPopupInitialized: null,\r\n applyButtonText: messageLocalization.format(\"OK\"),\r\n cancelButtonText: messageLocalization.format(\"Cancel\"),\r\n buttonsLocation: \"default\",\r\n useHiddenSubmitElement: false,\r\n validationMessagePosition: \"auto\"\r\n })\r\n },\r\n _useTemplates: function() {\r\n return true\r\n },\r\n _getDefaultPopupPosition: function(isRtlEnabled) {\r\n var position = getDefaultAlignment(isRtlEnabled);\r\n return {\r\n offset: {\r\n h: 0,\r\n v: -1\r\n },\r\n my: position + \" top\",\r\n at: position + \" bottom\",\r\n collision: \"flip flip\"\r\n }\r\n },\r\n _defaultOptionsRules: function() {\r\n return this.callBase().concat([{\r\n device: function(_device) {\r\n var isGeneric = \"generic\" === _device.platform;\r\n return isGeneric\r\n },\r\n options: {\r\n popupPosition: {\r\n offset: {\r\n v: 0\r\n }\r\n }\r\n }\r\n }])\r\n },\r\n _inputWrapper: function() {\r\n return this.$element().find(\".\" + DROP_DOWN_EDITOR_INPUT_WRAPPER).first()\r\n },\r\n _init: function() {\r\n this.callBase();\r\n this._initVisibilityActions();\r\n this._initPopupInitializedAction();\r\n this._updatePopupPosition(this.option(\"rtlEnabled\"));\r\n this._options.cache(\"dropDownOptions\", this.option(\"dropDownOptions\"))\r\n },\r\n _updatePopupPosition: function(isRtlEnabled) {\r\n var {\r\n my: my,\r\n at: at\r\n } = this._getDefaultPopupPosition(isRtlEnabled);\r\n var currentPosition = this.option(\"popupPosition\");\r\n this.option(\"popupPosition\", extend({}, currentPosition, {\r\n my: my,\r\n at: at\r\n }))\r\n },\r\n _initVisibilityActions: function() {\r\n this._openAction = this._createActionByOption(\"onOpened\", {\r\n excludeValidators: [\"disabled\", \"readOnly\"]\r\n });\r\n this._closeAction = this._createActionByOption(\"onClosed\", {\r\n excludeValidators: [\"disabled\", \"readOnly\"]\r\n })\r\n },\r\n _initPopupInitializedAction: function() {\r\n this._popupInitializedAction = this._createActionByOption(\"onPopupInitialized\", {\r\n excludeValidators: [\"disabled\", \"readOnly\"]\r\n })\r\n },\r\n _initMarkup: function() {\r\n this._renderSubmitElement();\r\n this.callBase();\r\n this.$element().addClass(DROP_DOWN_EDITOR_CLASS);\r\n this.setAria(\"role\", \"combobox\")\r\n },\r\n _render: function() {\r\n this.callBase();\r\n this._renderOpenHandler();\r\n this._attachFocusOutHandler();\r\n this._renderOpenedState()\r\n },\r\n _renderContentImpl: function() {\r\n if (!this.option(\"deferRendering\")) {\r\n this._createPopup()\r\n }\r\n },\r\n _renderInput: function() {\r\n this.callBase();\r\n this._wrapInput();\r\n this._setDefaultAria()\r\n },\r\n _wrapInput: function() {\r\n this._$container = this.$element().wrapInner($(\"
\").addClass(DROP_DOWN_EDITOR_INPUT_WRAPPER)).children().eq(0)\r\n },\r\n _setDefaultAria: function() {\r\n this.setAria({\r\n haspopup: \"true\",\r\n autocomplete: \"list\"\r\n })\r\n },\r\n _readOnlyPropValue: function() {\r\n return !this._isEditable() || this.callBase()\r\n },\r\n _cleanFocusState: function() {\r\n this.callBase();\r\n if (this.option(\"fieldTemplate\")) {\r\n this._detachFocusEvents()\r\n }\r\n },\r\n _getFieldTemplate: function() {\r\n return this.option(\"fieldTemplate\") && this._getTemplateByOption(\"fieldTemplate\")\r\n },\r\n _renderMask: function() {\r\n if (this.option(\"fieldTemplate\")) {\r\n return\r\n }\r\n this.callBase()\r\n },\r\n _renderField: function() {\r\n var fieldTemplate = this._getFieldTemplate();\r\n fieldTemplate && this._renderTemplatedField(fieldTemplate, this._fieldRenderData())\r\n },\r\n _renderPlaceholder: function() {\r\n var hasFieldTemplate = !!this._getFieldTemplate();\r\n if (!hasFieldTemplate) {\r\n this.callBase()\r\n }\r\n },\r\n _renderValue: function() {\r\n if (this.option(\"useHiddenSubmitElement\")) {\r\n this._setSubmitValue()\r\n }\r\n var promise = this.callBase();\r\n promise.always(this._renderField.bind(this))\r\n },\r\n _renderTemplatedField: function(fieldTemplate, data) {\r\n var _this$_fieldRenderQue;\r\n this._fieldRenderQueueLength = (null !== (_this$_fieldRenderQue = this._fieldRenderQueueLength) && void 0 !== _this$_fieldRenderQue ? _this$_fieldRenderQue : 0) + 1;\r\n var isFocused = focused(this._input());\r\n var $container = this._$container;\r\n this._detachKeyboardEvents();\r\n this._refreshButtonsContainer();\r\n this._detachWrapperContent();\r\n this._detachFocusEvents();\r\n $container.empty();\r\n var $templateWrapper = $(\"
\").addClass(DROP_DOWN_EDITOR_FIELD_TEMPLATE_WRAPPER).appendTo($container);\r\n fieldTemplate.render({\r\n model: data,\r\n container: getPublicElement($templateWrapper),\r\n onRendered: () => {\r\n this._fieldRenderQueueLength--;\r\n if (0 !== this._fieldRenderQueueLength) {\r\n return\r\n }\r\n var $input = this._input();\r\n if (!$input.length) {\r\n throw errors.Error(\"E1010\")\r\n }\r\n this._integrateInput();\r\n isFocused && eventsEngine.trigger($input, \"focus\")\r\n }\r\n });\r\n this._attachWrapperContent($container)\r\n },\r\n _detachWrapperContent() {\r\n var _this$_$submitElement, _this$_$beforeButtons, _this$_$afterButtonsC;\r\n var useHiddenSubmitElement = this.option(\"useHiddenSubmitElement\");\r\n useHiddenSubmitElement && (null === (_this$_$submitElement = this._$submitElement) || void 0 === _this$_$submitElement ? void 0 : _this$_$submitElement.detach());\r\n var beforeButtonsContainerParent = null === (_this$_$beforeButtons = this._$beforeButtonsContainer) || void 0 === _this$_$beforeButtons ? void 0 : _this$_$beforeButtons[0].parentNode;\r\n var afterButtonsContainerParent = null === (_this$_$afterButtonsC = this._$afterButtonsContainer) || void 0 === _this$_$afterButtonsC ? void 0 : _this$_$afterButtonsC[0].parentNode;\r\n null === beforeButtonsContainerParent || void 0 === beforeButtonsContainerParent ? void 0 : beforeButtonsContainerParent.removeChild(this._$beforeButtonsContainer[0]);\r\n null === afterButtonsContainerParent || void 0 === afterButtonsContainerParent ? void 0 : afterButtonsContainerParent.removeChild(this._$afterButtonsContainer[0])\r\n },\r\n _attachWrapperContent($container) {\r\n var _this$_$submitElement2;\r\n var useHiddenSubmitElement = this.option(\"useHiddenSubmitElement\");\r\n $container.prepend(this._$beforeButtonsContainer);\r\n useHiddenSubmitElement && (null === (_this$_$submitElement2 = this._$submitElement) || void 0 === _this$_$submitElement2 ? void 0 : _this$_$submitElement2.appendTo($container));\r\n $container.append(this._$afterButtonsContainer)\r\n },\r\n _refreshButtonsContainer() {\r\n this._$buttonsContainer = this.$element().children().eq(0)\r\n },\r\n _integrateInput: function() {\r\n this._renderFocusState();\r\n this._refreshValueChangeEvent();\r\n this._refreshEvents();\r\n this._refreshEmptinessEvent()\r\n },\r\n _refreshEmptinessEvent: function() {\r\n eventsEngine.off(this._input(), \"input blur\", this._toggleEmptinessEventHandler);\r\n this._renderEmptinessEvent()\r\n },\r\n _fieldRenderData: function() {\r\n return this.option(\"value\")\r\n },\r\n _initTemplates: function() {\r\n this._templateManager.addDefaultTemplates({\r\n dropDownButton: new FunctionTemplate((function(options) {\r\n var $icon = $(\"
\").addClass(DROP_DOWN_EDITOR_BUTTON_ICON);\r\n $(options.container).append($icon)\r\n }))\r\n });\r\n this.callBase()\r\n },\r\n _renderOpenHandler: function() {\r\n var $inputWrapper = this._inputWrapper();\r\n var eventName = addNamespace(clickEventName, this.NAME);\r\n var openOnFieldClick = this.option(\"openOnFieldClick\");\r\n eventsEngine.off($inputWrapper, eventName);\r\n eventsEngine.on($inputWrapper, eventName, this._getInputClickHandler(openOnFieldClick));\r\n this.$element().toggleClass(DROP_DOWN_EDITOR_FIELD_CLICKABLE, openOnFieldClick);\r\n if (openOnFieldClick) {\r\n this._openOnFieldClickAction = this._createAction(this._openHandler.bind(this))\r\n }\r\n },\r\n _attachFocusOutHandler: function() {\r\n if (isIOs) {\r\n this._detachFocusOutEvents();\r\n eventsEngine.on(this._inputWrapper(), addNamespace(\"focusout\", this.NAME), event => {\r\n var newTarget = event.relatedTarget;\r\n var popupWrapper = this.content ? $(this.content()).closest(\".\" + DROP_DOWN_EDITOR_OVERLAY) : this._$popup;\r\n if (newTarget && this.option(\"opened\")) {\r\n var isNewTargetOutside = 0 === $(newTarget).closest(\".\" + DROP_DOWN_EDITOR_OVERLAY, popupWrapper).length;\r\n if (isNewTargetOutside) {\r\n this.close()\r\n }\r\n }\r\n })\r\n }\r\n },\r\n _detachFocusOutEvents: function() {\r\n isIOs && eventsEngine.off(this._inputWrapper(), addNamespace(\"focusout\", this.NAME))\r\n },\r\n _getInputClickHandler: function(openOnFieldClick) {\r\n return openOnFieldClick ? e => {\r\n this._executeOpenAction(e)\r\n } : e => {\r\n this._focusInput()\r\n }\r\n },\r\n _openHandler: function() {\r\n this._toggleOpenState()\r\n },\r\n _executeOpenAction: function(e) {\r\n this._openOnFieldClickAction({\r\n event: e\r\n })\r\n },\r\n _keyboardEventBindingTarget: function() {\r\n return this._input()\r\n },\r\n _focusInput: function() {\r\n if (this.option(\"disabled\")) {\r\n return false\r\n }\r\n if (this.option(\"focusStateEnabled\") && !focused(this._input())) {\r\n this._resetCaretPosition();\r\n eventsEngine.trigger(this._input(), \"focus\")\r\n }\r\n return true\r\n },\r\n _resetCaretPosition: function() {\r\n var ignoreEditable = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : false;\r\n var inputElement = this._input().get(0);\r\n if (inputElement) {\r\n var {\r\n value: value\r\n } = inputElement;\r\n var caretPosition = isDefined(value) && (ignoreEditable || this._isEditable()) ? value.length : 0;\r\n this._caret({\r\n start: caretPosition,\r\n end: caretPosition\r\n }, true)\r\n }\r\n },\r\n _isEditable: function() {\r\n return this.option(\"acceptCustomValue\")\r\n },\r\n _toggleOpenState: function(isVisible) {\r\n if (!this._focusInput()) {\r\n return\r\n }\r\n if (!this.option(\"readOnly\")) {\r\n isVisible = arguments.length ? isVisible : !this.option(\"opened\");\r\n this.option(\"opened\", isVisible)\r\n }\r\n },\r\n _getControlsAria() {\r\n return this._popup && this._popupContentId\r\n },\r\n _renderOpenedState: function() {\r\n var opened = this.option(\"opened\");\r\n if (opened) {\r\n this._createPopup()\r\n }\r\n this.$element().toggleClass(DROP_DOWN_EDITOR_ACTIVE, opened);\r\n this._setPopupOption(\"visible\", opened);\r\n var arias = {\r\n expanded: opened,\r\n controls: this._getControlsAria()\r\n };\r\n this.setAria(arias);\r\n this.setAria(\"owns\", opened ? this._popupContentId : void 0, this.$element())\r\n },\r\n _createPopup: function() {\r\n if (this._$popup) {\r\n return\r\n }\r\n this._$popup = $(\"
\").addClass(DROP_DOWN_EDITOR_OVERLAY).appendTo(this.$element());\r\n this._renderPopup();\r\n this._renderPopupContent()\r\n },\r\n _renderPopupContent: noop,\r\n _renderPopup: function() {\r\n var popupConfig = extend(this._popupConfig(), this._options.cache(\"dropDownOptions\"));\r\n delete popupConfig.closeOnOutsideClick;\r\n if (popupConfig.elementAttr && !Object.keys(popupConfig.elementAttr).length) {\r\n delete popupConfig.elementAttr\r\n }\r\n this._popup = this._createComponent(this._$popup, Popup, popupConfig);\r\n this._popup.on({\r\n showing: this._popupShowingHandler.bind(this),\r\n shown: this._popupShownHandler.bind(this),\r\n hiding: this._popupHidingHandler.bind(this),\r\n hidden: this._popupHiddenHandler.bind(this),\r\n contentReady: this._contentReadyHandler.bind(this)\r\n });\r\n this._contentReadyHandler();\r\n this._setPopupContentId(this._popup.$content());\r\n this._bindInnerWidgetOptions(this._popup, \"dropDownOptions\")\r\n },\r\n _setPopupContentId($popupContent) {\r\n this._popupContentId = \"dx-\" + new Guid;\r\n this.setAria(\"id\", this._popupContentId, $popupContent)\r\n },\r\n _contentReadyHandler: noop,\r\n _popupConfig: function() {\r\n return {\r\n onInitialized: this._popupInitializedHandler(),\r\n position: extend(this.option(\"popupPosition\"), {\r\n of: this.$element()\r\n }),\r\n showTitle: this.option(\"dropDownOptions.showTitle\"),\r\n _ignoreFunctionValueDeprecation: true,\r\n width: () => getElementWidth(this.$element()),\r\n height: \"auto\",\r\n shading: false,\r\n hideOnParentScroll: true,\r\n hideOnOutsideClick: e => this._closeOutsideDropDownHandler(e),\r\n animation: {\r\n show: {\r\n type: \"fade\",\r\n duration: 0,\r\n from: 0,\r\n to: 1\r\n },\r\n hide: {\r\n type: \"fade\",\r\n duration: 400,\r\n from: 1,\r\n to: 0\r\n }\r\n },\r\n deferRendering: false,\r\n focusStateEnabled: false,\r\n showCloseButton: false,\r\n dragEnabled: false,\r\n toolbarItems: this._getPopupToolbarItems(),\r\n onPositioned: this._popupPositionedHandler.bind(this),\r\n fullScreen: false,\r\n contentTemplate: null,\r\n _wrapperClassExternal: DROP_DOWN_EDITOR_OVERLAY\r\n }\r\n },\r\n _popupInitializedHandler: function() {\r\n if (!this.option(\"onPopupInitialized\")) {\r\n return null\r\n }\r\n return e => {\r\n this._popupInitializedAction({\r\n popup: e.component\r\n })\r\n }\r\n },\r\n _dimensionChanged: function() {\r\n if (hasWindow() && !this.$element().is(\":visible\")) {\r\n this.close();\r\n return\r\n }\r\n this._updatePopupWidth()\r\n },\r\n _updatePopupWidth: function() {\r\n var popupWidth = getSizeValue(this.option(\"dropDownOptions.width\"));\r\n if (void 0 === popupWidth) {\r\n this._setPopupOption(\"width\", () => getElementWidth(this.$element()))\r\n }\r\n },\r\n _popupPositionedHandler: function(e) {\r\n var _e$position, _e$position$v;\r\n var {\r\n labelMode: labelMode,\r\n stylingMode: stylingMode\r\n } = this.option();\r\n if (!this._popup) {\r\n return\r\n }\r\n var $popupOverlayContent = this._popup.$overlayContent();\r\n var isOverlayFlipped = null === (_e$position = e.position) || void 0 === _e$position ? void 0 : null === (_e$position$v = _e$position.v) || void 0 === _e$position$v ? void 0 : _e$position$v.flip;\r\n var shouldIndentForLabel = \"hidden\" !== labelMode && \"outlined\" === stylingMode;\r\n if (e.position) {\r\n $popupOverlayContent.toggleClass(DROP_DOWN_EDITOR_OVERLAY_FLIPPED, isOverlayFlipped)\r\n }\r\n if (isOverlayFlipped && shouldIndentForLabel && this._label.isVisible()) {\r\n var $label = this._label.$element();\r\n move($popupOverlayContent, {\r\n top: locate($popupOverlayContent).top - parseInt($label.css(\"fontSize\"))\r\n })\r\n }\r\n },\r\n _popupShowingHandler: noop,\r\n _popupHidingHandler: function() {\r\n this.option(\"opened\", false)\r\n },\r\n _popupShownHandler: function() {\r\n var _this$_validationMess;\r\n this._openAction();\r\n null === (_this$_validationMess = this._validationMessage) || void 0 === _this$_validationMess ? void 0 : _this$_validationMess.option(\"positionSide\", this._getValidationMessagePositionSide())\r\n },\r\n _popupHiddenHandler: function() {\r\n var _this$_validationMess2;\r\n this._closeAction();\r\n null === (_this$_validationMess2 = this._validationMessage) || void 0 === _this$_validationMess2 ? void 0 : _this$_validationMess2.option(\"positionSide\", this._getValidationMessagePositionSide())\r\n },\r\n _getValidationMessagePositionSide: function() {\r\n var validationMessagePosition = this.option(\"validationMessagePosition\");\r\n if (\"auto\" !== validationMessagePosition) {\r\n return validationMessagePosition\r\n }\r\n var positionSide = \"bottom\";\r\n if (this._popup && this._popup.option(\"visible\")) {\r\n var {\r\n top: myTop\r\n } = animationPosition.setup(this.$element());\r\n var {\r\n top: popupTop\r\n } = animationPosition.setup(this._popup.$content());\r\n positionSide = myTop + this.option(\"popupPosition\").offset.v > popupTop ? \"bottom\" : \"top\"\r\n }\r\n return positionSide\r\n },\r\n _closeOutsideDropDownHandler: function(_ref) {\r\n var {\r\n target: target\r\n } = _ref;\r\n var $target = $(target);\r\n var dropDownButton = this.getButton(\"dropDown\");\r\n var $dropDownButton = dropDownButton && dropDownButton.$element();\r\n var isInputClicked = !!$target.closest(this.$element()).length;\r\n var isDropDownButtonClicked = !!$target.closest($dropDownButton).length;\r\n var isOutsideClick = !isInputClicked && !isDropDownButtonClicked;\r\n return isOutsideClick\r\n },\r\n _clean: function() {\r\n delete this._openOnFieldClickAction;\r\n if (this._$popup) {\r\n this._$popup.remove();\r\n delete this._$popup;\r\n delete this._popup\r\n }\r\n this.callBase()\r\n },\r\n _setPopupOption: function(optionName, value) {\r\n this._setWidgetOption(\"_popup\", arguments)\r\n },\r\n _validatedOpening: function() {\r\n if (!this.option(\"readOnly\")) {\r\n this._toggleOpenState(true)\r\n }\r\n },\r\n _getPopupToolbarItems: function() {\r\n return \"useButtons\" === this.option(\"applyValueMode\") ? this._popupToolbarItemsConfig() : []\r\n },\r\n _getFirstPopupElement: function() {\r\n return this._popup.$wrapper().find(\".dx-popup-done.dx-button\")\r\n },\r\n _getLastPopupElement: function() {\r\n return this._popup.$wrapper().find(\".dx-popup-cancel.dx-button\")\r\n },\r\n _popupElementTabHandler: function(e) {\r\n var $element = $(e.currentTarget);\r\n if (e.shiftKey && $element.is(this._getFirstPopupElement()) || !e.shiftKey && $element.is(this._getLastPopupElement())) {\r\n eventsEngine.trigger(this._input(), \"focus\");\r\n e.preventDefault()\r\n }\r\n },\r\n _popupElementEscHandler: function() {\r\n eventsEngine.trigger(this._input(), \"focus\");\r\n this.close()\r\n },\r\n _popupButtonInitializedHandler: function(e) {\r\n e.component.registerKeyHandler(\"tab\", this._popupElementTabHandler.bind(this));\r\n e.component.registerKeyHandler(\"escape\", this._popupElementEscHandler.bind(this))\r\n },\r\n _popupToolbarItemsConfig: function() {\r\n var buttonsConfig = [{\r\n shortcut: \"done\",\r\n options: {\r\n onClick: this._applyButtonHandler.bind(this),\r\n text: this.option(\"applyButtonText\"),\r\n onInitialized: this._popupButtonInitializedHandler.bind(this)\r\n }\r\n }, {\r\n shortcut: \"cancel\",\r\n options: {\r\n onClick: this._cancelButtonHandler.bind(this),\r\n text: this.option(\"cancelButtonText\"),\r\n onInitialized: this._popupButtonInitializedHandler.bind(this)\r\n }\r\n }];\r\n return this._applyButtonsLocation(buttonsConfig)\r\n },\r\n _applyButtonsLocation: function(buttonsConfig) {\r\n var buttonsLocation = this.option(\"buttonsLocation\");\r\n var resultConfig = buttonsConfig;\r\n if (\"default\" !== buttonsLocation) {\r\n var position = splitPair(buttonsLocation);\r\n each(resultConfig, (function(_, element) {\r\n extend(element, {\r\n toolbar: position[0],\r\n location: position[1]\r\n })\r\n }))\r\n }\r\n return resultConfig\r\n },\r\n _applyButtonHandler: function() {\r\n this.close();\r\n this.option(\"focusStateEnabled\") && this.focus()\r\n },\r\n _cancelButtonHandler: function() {\r\n this.close();\r\n this.option(\"focusStateEnabled\") && this.focus()\r\n },\r\n _popupOptionChanged: function(args) {\r\n var options = Widget.getOptionsFromContainer(args);\r\n this._setPopupOption(options);\r\n var optionsKeys = Object.keys(options);\r\n if (-1 !== optionsKeys.indexOf(\"width\") || -1 !== optionsKeys.indexOf(\"height\")) {\r\n this._dimensionChanged()\r\n }\r\n },\r\n _renderSubmitElement: function() {\r\n if (this.option(\"useHiddenSubmitElement\")) {\r\n this._$submitElement = $(\"
\").attr(\"type\", \"hidden\").appendTo(this.$element())\r\n }\r\n },\r\n _setSubmitValue: function() {\r\n this._getSubmitElement().val(this.option(\"value\"))\r\n },\r\n _getSubmitElement: function() {\r\n if (this.option(\"useHiddenSubmitElement\")) {\r\n return this._$submitElement\r\n } else {\r\n return this.callBase()\r\n }\r\n },\r\n _dispose: function() {\r\n this._detachFocusOutEvents();\r\n this.callBase()\r\n },\r\n _optionChanged: function(args) {\r\n var _this$_popup;\r\n switch (args.name) {\r\n case \"width\":\r\n case \"height\":\r\n this.callBase(args);\r\n null === (_this$_popup = this._popup) || void 0 === _this$_popup ? void 0 : _this$_popup.repaint();\r\n break;\r\n case \"opened\":\r\n this._renderOpenedState();\r\n break;\r\n case \"onOpened\":\r\n case \"onClosed\":\r\n this._initVisibilityActions();\r\n break;\r\n case \"onPopupInitialized\":\r\n this._initPopupInitializedAction();\r\n break;\r\n case \"fieldTemplate\":\r\n if (isDefined(args.value)) {\r\n this._renderField()\r\n } else {\r\n this._invalidate()\r\n }\r\n break;\r\n case \"acceptCustomValue\":\r\n case \"openOnFieldClick\":\r\n this._invalidate();\r\n break;\r\n case \"dropDownButtonTemplate\":\r\n case \"showDropDownButton\":\r\n this._updateButtons([\"dropDown\"]);\r\n break;\r\n case \"dropDownOptions\":\r\n this._popupOptionChanged(args);\r\n this._options.cache(\"dropDownOptions\", this.option(\"dropDownOptions\"));\r\n break;\r\n case \"popupPosition\":\r\n break;\r\n case \"deferRendering\":\r\n if (hasWindow()) {\r\n this._createPopup()\r\n }\r\n break;\r\n case \"applyValueMode\":\r\n case \"applyButtonText\":\r\n case \"cancelButtonText\":\r\n case \"buttonsLocation\":\r\n this._setPopupOption(\"toolbarItems\", this._getPopupToolbarItems());\r\n break;\r\n case \"useHiddenSubmitElement\":\r\n if (this._$submitElement) {\r\n this._$submitElement.remove();\r\n this._$submitElement = void 0\r\n }\r\n this._renderSubmitElement();\r\n break;\r\n case \"rtlEnabled\":\r\n this._updatePopupPosition(args.value);\r\n this.callBase(args);\r\n break;\r\n default:\r\n this.callBase(args)\r\n }\r\n },\r\n open: function() {\r\n this.option(\"opened\", true)\r\n },\r\n close: function() {\r\n this.option(\"opened\", false)\r\n },\r\n field: function() {\r\n return getPublicElement(this._input())\r\n },\r\n content: function() {\r\n return this._popup ? this._popup.content() : null\r\n }\r\n});\r\nregisterComponent(\"dxDropDownEditor\", DropDownEditor);\r\nexport default DropDownEditor;\r\n","/**\r\n * DevExtreme (esm/ui/drop_down_editor/utils.js)\r\n * Version: 22.2.4\r\n * Build date: Thu Jan 19 2023\r\n *\r\n * Copyright (c) 2012 - 2023 Developer Express Inc. ALL RIGHTS RESERVED\r\n * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/\r\n */\r\nimport {\r\n getOuterWidth\r\n} from \"../../core/utils/size\";\r\nimport {\r\n hasWindow\r\n} from \"../../core/utils/window\";\r\nvar getElementWidth = function($element) {\r\n if (hasWindow()) {\r\n return getOuterWidth($element)\r\n }\r\n};\r\nvar getSizeValue = function(size) {\r\n if (null === size) {\r\n size = void 0\r\n }\r\n if (\"function\" === typeof size) {\r\n size = size()\r\n }\r\n return size\r\n};\r\nexport {\r\n getElementWidth,\r\n getSizeValue\r\n};\r\n","/**\r\n * DevExtreme (esm/ui/editor/editor.js)\r\n * Version: 22.2.4\r\n * Build date: Thu Jan 19 2023\r\n *\r\n * Copyright (c) 2012 - 2023 Developer Express Inc. ALL RIGHTS RESERVED\r\n * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/\r\n */\r\nimport $ from \"../../core/renderer\";\r\nimport {\r\n data\r\n} from \"../../core/element_data\";\r\nimport Callbacks from \"../../core/utils/callbacks\";\r\nimport {\r\n hasWindow\r\n} from \"../../core/utils/window\";\r\nimport {\r\n addNamespace,\r\n normalizeKeyName\r\n} from \"../../events/utils/index\";\r\nimport {\r\n extend\r\n} from \"../../core/utils/extend\";\r\nimport Widget from \"../widget/ui.widget\";\r\nimport ValidationEngine from \"../validation_engine\";\r\nimport EventsEngine from \"../../events/core/events_engine\";\r\nimport ValidationMessage from \"../validation_message\";\r\nimport Guid from \"../../core/guid\";\r\nimport {\r\n noop\r\n} from \"../../core/utils/common\";\r\nimport {\r\n resetActiveElement\r\n} from \"../../core/utils/dom\";\r\nvar INVALID_MESSAGE_AUTO = \"dx-invalid-message-auto\";\r\nvar READONLY_STATE_CLASS = \"dx-state-readonly\";\r\nvar INVALID_CLASS = \"dx-invalid\";\r\nvar DX_INVALID_BADGE_CLASS = \"dx-show-invalid-badge\";\r\nvar VALIDATION_TARGET = \"dx-validation-target\";\r\nvar VALIDATION_STATUS_VALID = \"valid\";\r\nvar VALIDATION_STATUS_INVALID = \"invalid\";\r\nvar READONLY_NAMESPACE = \"editorReadOnly\";\r\nvar ALLOWED_STYLING_MODES = [\"outlined\", \"filled\", \"underlined\"];\r\nvar VALIDATION_MESSAGE_KEYS_MAP = {\r\n validationMessageMode: \"mode\",\r\n validationMessagePosition: \"positionSide\",\r\n validationMessageOffset: \"offset\",\r\n validationBoundary: \"boundary\"\r\n};\r\nvar Editor = Widget.inherit({\r\n ctor: function() {\r\n this.showValidationMessageTimeout = null;\r\n this.validationRequest = Callbacks();\r\n this.callBase.apply(this, arguments)\r\n },\r\n _createElement: function(element) {\r\n this.callBase(element);\r\n var $element = this.$element();\r\n if ($element) {\r\n data($element[0], VALIDATION_TARGET, this)\r\n }\r\n },\r\n _initOptions: function(options) {\r\n this.callBase.apply(this, arguments);\r\n this.option(ValidationEngine.initValidationOptions(options))\r\n },\r\n _init: function() {\r\n this.callBase();\r\n this._options.cache(\"validationTooltipOptions\", this.option(\"validationTooltipOptions\"));\r\n var $element = this.$element();\r\n $element.addClass(DX_INVALID_BADGE_CLASS)\r\n },\r\n _getDefaultOptions: function() {\r\n return extend(this.callBase(), {\r\n value: null,\r\n name: \"\",\r\n onValueChanged: null,\r\n readOnly: false,\r\n isValid: true,\r\n validationError: null,\r\n validationErrors: null,\r\n validationStatus: VALIDATION_STATUS_VALID,\r\n validationMessageMode: \"auto\",\r\n validationMessagePosition: \"bottom\",\r\n validationBoundary: void 0,\r\n validationMessageOffset: {\r\n h: 0,\r\n v: 0\r\n },\r\n validationTooltipOptions: {}\r\n })\r\n },\r\n _attachKeyboardEvents: function() {\r\n if (!this.option(\"readOnly\")) {\r\n this.callBase()\r\n }\r\n },\r\n _setOptionsByReference: function() {\r\n this.callBase();\r\n extend(this._optionsByReference, {\r\n validationError: true\r\n })\r\n },\r\n _createValueChangeAction: function() {\r\n this._valueChangeAction = this._createActionByOption(\"onValueChanged\", {\r\n excludeValidators: [\"disabled\", \"readOnly\"]\r\n })\r\n },\r\n _suppressValueChangeAction: function() {\r\n this._valueChangeActionSuppressed = true\r\n },\r\n _resumeValueChangeAction: function() {\r\n this._valueChangeActionSuppressed = false\r\n },\r\n _initMarkup: function() {\r\n var _this$option;\r\n this._toggleReadOnlyState();\r\n this._setSubmitElementName(this.option(\"name\"));\r\n this.callBase();\r\n this._renderValidationState();\r\n null === (_this$option = this.option(\"_onMarkupRendered\")) || void 0 === _this$option ? void 0 : _this$option()\r\n },\r\n _raiseValueChangeAction: function(value, previousValue) {\r\n if (!this._valueChangeAction) {\r\n this._createValueChangeAction()\r\n }\r\n this._valueChangeAction(this._valueChangeArgs(value, previousValue))\r\n },\r\n _valueChangeArgs: function(value, previousValue) {\r\n return {\r\n value: value,\r\n previousValue: previousValue,\r\n event: this._valueChangeEventInstance\r\n }\r\n },\r\n _saveValueChangeEvent: function(e) {\r\n this._valueChangeEventInstance = e\r\n },\r\n _focusInHandler: function(e) {\r\n var isValidationMessageShownOnFocus = \"auto\" === this.option(\"validationMessageMode\");\r\n if (this._canValueBeChangedByClick() && isValidationMessageShownOnFocus) {\r\n var _this$_validationMess;\r\n var $validationMessageWrapper = null === (_this$_validationMess = this._validationMessage) || void 0 === _this$_validationMess ? void 0 : _this$_validationMess.$wrapper();\r\n null === $validationMessageWrapper || void 0 === $validationMessageWrapper ? void 0 : $validationMessageWrapper.removeClass(INVALID_MESSAGE_AUTO);\r\n clearTimeout(this.showValidationMessageTimeout);\r\n this.showValidationMessageTimeout = setTimeout(() => null === $validationMessageWrapper || void 0 === $validationMessageWrapper ? void 0 : $validationMessageWrapper.addClass(INVALID_MESSAGE_AUTO), 150)\r\n }\r\n return this.callBase(e)\r\n },\r\n _canValueBeChangedByClick: function() {\r\n return false\r\n },\r\n _getStylingModePrefix: function() {\r\n return \"dx-editor-\"\r\n },\r\n _renderStylingMode: function() {\r\n var optionValue = this.option(\"stylingMode\");\r\n var prefix = this._getStylingModePrefix();\r\n var allowedStylingClasses = ALLOWED_STYLING_MODES.map(mode => prefix + mode);\r\n allowedStylingClasses.forEach(className => this.$element().removeClass(className));\r\n var stylingModeClass = prefix + optionValue;\r\n if (-1 === allowedStylingClasses.indexOf(stylingModeClass)) {\r\n var defaultOptionValue = this._getDefaultOptions().stylingMode;\r\n var platformOptionValue = this._convertRulesToOptions(this._defaultOptionsRules()).stylingMode;\r\n stylingModeClass = prefix + (platformOptionValue || defaultOptionValue)\r\n }\r\n this.$element().addClass(stylingModeClass)\r\n },\r\n _getValidationErrors: function() {\r\n var validationErrors = this.option(\"validationErrors\");\r\n if (!validationErrors && this.option(\"validationError\")) {\r\n validationErrors = [this.option(\"validationError\")]\r\n }\r\n return validationErrors\r\n },\r\n _disposeValidationMessage: function() {\r\n if (this._$validationMessage) {\r\n this._$validationMessage.remove();\r\n this.setAria(\"describedby\", null);\r\n this._$validationMessage = void 0;\r\n this._validationMessage = void 0\r\n }\r\n },\r\n _toggleValidationClasses: function(isInvalid) {\r\n this.$element().toggleClass(INVALID_CLASS, isInvalid);\r\n this.setAria(VALIDATION_STATUS_INVALID, isInvalid || void 0)\r\n },\r\n _renderValidationState: function() {\r\n var isValid = this.option(\"isValid\") && this.option(\"validationStatus\") !== VALIDATION_STATUS_INVALID;\r\n var validationErrors = this._getValidationErrors();\r\n var $element = this.$element();\r\n this._toggleValidationClasses(!isValid);\r\n if (!hasWindow()) {\r\n return\r\n }\r\n this._disposeValidationMessage();\r\n if (!isValid && validationErrors) {\r\n var {\r\n validationMessageMode: validationMessageMode,\r\n validationMessagePosition: validationMessagePosition,\r\n validationMessageOffset: validationMessageOffset,\r\n validationBoundary: validationBoundary,\r\n rtlEnabled: rtlEnabled\r\n } = this.option();\r\n this._$validationMessage = $(\"
\").appendTo($element);\r\n var validationMessageContentId = \"dx-\".concat(new Guid);\r\n this.setAria(\"describedby\", validationMessageContentId);\r\n this._validationMessage = new ValidationMessage(this._$validationMessage, extend({\r\n validationErrors: validationErrors,\r\n rtlEnabled: rtlEnabled,\r\n target: this._getValidationMessageTarget(),\r\n visualContainer: $element,\r\n mode: validationMessageMode,\r\n positionSide: validationMessagePosition,\r\n offset: validationMessageOffset,\r\n boundary: validationBoundary,\r\n contentId: validationMessageContentId\r\n }, this._options.cache(\"validationTooltipOptions\")));\r\n this._bindInnerWidgetOptions(this._validationMessage, \"validationTooltipOptions\")\r\n }\r\n },\r\n _getValidationMessageTarget: function() {\r\n return this.$element()\r\n },\r\n _toggleReadOnlyState: function() {\r\n var readOnly = this.option(\"readOnly\");\r\n this._toggleBackspaceHandler(readOnly);\r\n this.$element().toggleClass(READONLY_STATE_CLASS, !!readOnly);\r\n this.setAria(\"readonly\", readOnly || void 0)\r\n },\r\n _toggleBackspaceHandler: function(isReadOnly) {\r\n var $eventTarget = this._keyboardEventBindingTarget();\r\n var eventName = addNamespace(\"keydown\", READONLY_NAMESPACE);\r\n EventsEngine.off($eventTarget, eventName);\r\n if (isReadOnly) {\r\n EventsEngine.on($eventTarget, eventName, e => {\r\n if (\"backspace\" === normalizeKeyName(e)) {\r\n e.preventDefault()\r\n }\r\n })\r\n }\r\n },\r\n _dispose: function() {\r\n var element = this.$element()[0];\r\n data(element, VALIDATION_TARGET, null);\r\n clearTimeout(this.showValidationMessageTimeout);\r\n this._disposeValidationMessage();\r\n this.callBase()\r\n },\r\n _setSubmitElementName: function(name) {\r\n var $submitElement = this._getSubmitElement();\r\n if (!$submitElement) {\r\n return\r\n }\r\n if (name.length > 0) {\r\n $submitElement.attr(\"name\", name)\r\n } else {\r\n $submitElement.removeAttr(\"name\")\r\n }\r\n },\r\n _getSubmitElement: function() {\r\n return null\r\n },\r\n _setValidationMessageOption: function(_ref) {\r\n var _this$_validationMess2;\r\n var {\r\n name: name,\r\n value: value\r\n } = _ref;\r\n var optionKey = VALIDATION_MESSAGE_KEYS_MAP[name] ? VALIDATION_MESSAGE_KEYS_MAP[name] : name;\r\n null === (_this$_validationMess2 = this._validationMessage) || void 0 === _this$_validationMess2 ? void 0 : _this$_validationMess2.option(optionKey, value)\r\n },\r\n _hasActiveElement: noop,\r\n _optionChanged: function(args) {\r\n var _this$_validationMess3;\r\n switch (args.name) {\r\n case \"onValueChanged\":\r\n this._createValueChangeAction();\r\n break;\r\n case \"readOnly\":\r\n this._toggleReadOnlyState();\r\n this._refreshFocusState();\r\n break;\r\n case \"value\":\r\n if (args.value != args.previousValue) {\r\n this.validationRequest.fire({\r\n value: args.value,\r\n editor: this\r\n })\r\n }\r\n if (!this._valueChangeActionSuppressed) {\r\n this._raiseValueChangeAction(args.value, args.previousValue);\r\n this._saveValueChangeEvent(void 0)\r\n }\r\n break;\r\n case \"width\":\r\n this.callBase(args);\r\n null === (_this$_validationMess3 = this._validationMessage) || void 0 === _this$_validationMess3 ? void 0 : _this$_validationMess3.updateMaxWidth();\r\n break;\r\n case \"name\":\r\n this._setSubmitElementName(args.value);\r\n break;\r\n case \"isValid\":\r\n case \"validationError\":\r\n case \"validationErrors\":\r\n case \"validationStatus\":\r\n this.option(ValidationEngine.synchronizeValidationOptions(args, this.option()));\r\n this._renderValidationState();\r\n break;\r\n case \"validationBoundary\":\r\n case \"validationMessageMode\":\r\n case \"validationMessagePosition\":\r\n case \"validationMessageOffset\":\r\n this._setValidationMessageOption(args);\r\n break;\r\n case \"rtlEnabled\":\r\n this._setValidationMessageOption(args);\r\n this.callBase(args);\r\n break;\r\n case \"validationTooltipOptions\":\r\n this._innerWidgetOptionChanged(this._validationMessage, args);\r\n break;\r\n default:\r\n this.callBase(args)\r\n }\r\n },\r\n blur: function() {\r\n if (this._hasActiveElement()) {\r\n resetActiveElement()\r\n }\r\n },\r\n reset: function() {\r\n var defaultOptions = this._getDefaultOptions();\r\n this.option(\"value\", defaultOptions.value)\r\n }\r\n});\r\nEditor.isEditor = instance => instance instanceof Editor;\r\nexport default Editor;\r\n","/**\r\n * DevExtreme (esm/ui/form/ui.form.items_runtime_info.js)\r\n * Version: 22.2.4\r\n * Build date: Thu Jan 19 2023\r\n *\r\n * Copyright (c) 2012 - 2023 Developer Express Inc. ALL RIGHTS RESERVED\r\n * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/\r\n */\r\nimport Guid from \"../../core/guid\";\r\nimport {\r\n each\r\n} from \"../../core/utils/iterator\";\r\nimport {\r\n extend\r\n} from \"../../core/utils/extend\";\r\nimport {\r\n isString\r\n} from \"../../core/utils/type\";\r\nexport default class FormItemsRunTimeInfo {\r\n constructor() {\r\n this._map = {}\r\n }\r\n _findWidgetInstance(condition) {\r\n var result;\r\n each(this._map, (function(guid, _ref) {\r\n var {\r\n widgetInstance: widgetInstance,\r\n item: item\r\n } = _ref;\r\n if (condition(item)) {\r\n result = widgetInstance;\r\n return false\r\n }\r\n }));\r\n return result\r\n }\r\n _findFieldByCondition(callback, valueExpr) {\r\n var result;\r\n each(this._map, (function(key, value) {\r\n if (callback(value)) {\r\n result = \"guid\" === valueExpr ? key : value[valueExpr];\r\n return false\r\n }\r\n }));\r\n return result\r\n }\r\n clear() {\r\n this._map = {}\r\n }\r\n removeItemsByItems(itemsRunTimeInfo) {\r\n each(itemsRunTimeInfo.getItems(), guid => this.removeItemByKey(guid))\r\n }\r\n removeItemByKey(key) {\r\n delete this._map[key]\r\n }\r\n add(options) {\r\n var key = options.guid || new Guid;\r\n this._map[key] = options;\r\n return key\r\n }\r\n addItemsOrExtendFrom(itemsRunTimeInfo) {\r\n itemsRunTimeInfo.each((key, itemRunTimeInfo) => {\r\n if (this._map[key]) {\r\n if (itemRunTimeInfo.widgetInstance) {\r\n this._map[key].widgetInstance = itemRunTimeInfo.widgetInstance\r\n }\r\n this._map[key].$itemContainer = itemRunTimeInfo.$itemContainer\r\n } else {\r\n this.add({\r\n item: itemRunTimeInfo.item,\r\n widgetInstance: itemRunTimeInfo.widgetInstance,\r\n guid: key,\r\n $itemContainer: itemRunTimeInfo.$itemContainer\r\n })\r\n }\r\n })\r\n }\r\n extendRunTimeItemInfoByKey(key, options) {\r\n if (this._map[key]) {\r\n this._map[key] = extend(this._map[key], options)\r\n }\r\n }\r\n findWidgetInstanceByItem(item) {\r\n return this._findWidgetInstance(storedItem => storedItem === item)\r\n }\r\n findGroupOrTabLayoutManagerByPath(targetPath) {\r\n return this._findFieldByCondition(_ref2 => {\r\n var {\r\n path: path\r\n } = _ref2;\r\n return path === targetPath\r\n }, \"layoutManager\")\r\n }\r\n findKeyByPath(targetPath) {\r\n return this._findFieldByCondition(_ref3 => {\r\n var {\r\n path: path\r\n } = _ref3;\r\n return path === targetPath\r\n }, \"guid\")\r\n }\r\n findWidgetInstanceByName(name) {\r\n return this._findWidgetInstance(item => name === item.name)\r\n }\r\n findWidgetInstanceByDataField(dataField) {\r\n return this._findWidgetInstance(item => dataField === (isString(item) ? item : item.dataField))\r\n }\r\n findItemContainerByItem(item) {\r\n for (var key in this._map) {\r\n if (this._map[key].item === item) {\r\n return this._map[key].$itemContainer\r\n }\r\n }\r\n return null\r\n }\r\n findItemIndexByItem(targetItem) {\r\n return this._findFieldByCondition(_ref4 => {\r\n var {\r\n item: item\r\n } = _ref4;\r\n return item === targetItem\r\n }, \"itemIndex\")\r\n }\r\n findPreparedItemByItem(item) {\r\n return this._findFieldByCondition(_ref5 => {\r\n var {\r\n item: currentItem\r\n } = _ref5;\r\n return currentItem === item\r\n }, \"preparedItem\")\r\n }\r\n getItems() {\r\n return this._map\r\n }\r\n each(handler) {\r\n each(this._map, (function(key, itemRunTimeInfo) {\r\n handler(key, itemRunTimeInfo)\r\n }))\r\n }\r\n removeItemsByPathStartWith(path) {\r\n var keys = Object.keys(this._map);\r\n var filteredKeys = keys.filter(key => {\r\n if (this._map[key].path) {\r\n return this._map[key].path.indexOf(path, 0) > -1\r\n }\r\n return false\r\n });\r\n filteredKeys.forEach(key => this.removeItemByKey(key))\r\n }\r\n}\r\n","/**\r\n * DevExtreme (esm/ui/multi_view/ui.multi_view.animation.js)\r\n * Version: 22.2.4\r\n * Build date: Thu Jan 19 2023\r\n *\r\n * Copyright (c) 2012 - 2023 Developer Express Inc. ALL RIGHTS RESERVED\r\n * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/\r\n */\r\nimport fx from \"../../animation/fx\";\r\nimport {\r\n move\r\n} from \"../../animation/translator\";\r\nexport var _translator = {\r\n move($element, position) {\r\n move($element, {\r\n left: position\r\n })\r\n }\r\n};\r\nexport var animation = {\r\n moveTo($element, position, duration, completeAction) {\r\n fx.animate($element, {\r\n type: \"slide\",\r\n to: {\r\n left: position\r\n },\r\n duration: duration,\r\n complete: completeAction\r\n })\r\n },\r\n complete($element) {\r\n fx.stop($element, true)\r\n }\r\n};\r\n","/**\r\n * DevExtreme (esm/ui/multi_view.js)\r\n * Version: 22.2.4\r\n * Build date: Thu Jan 19 2023\r\n *\r\n * Copyright (c) 2012 - 2023 Developer Express Inc. ALL RIGHTS RESERVED\r\n * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/\r\n */\r\nimport {\r\n getWidth\r\n} from \"../core/utils/size\";\r\nimport $ from \"../core/renderer\";\r\nimport {\r\n locate\r\n} from \"../animation/translator\";\r\nimport {\r\n _translator,\r\n animation\r\n} from \"./multi_view/ui.multi_view.animation\";\r\nimport {\r\n sign\r\n} from \"../core/utils/math\";\r\nimport {\r\n extend\r\n} from \"../core/utils/extend\";\r\nimport {\r\n noop,\r\n deferRender\r\n} from \"../core/utils/common\";\r\nimport {\r\n triggerResizeEvent\r\n} from \"../events/visibility_change\";\r\nimport {\r\n getPublicElement\r\n} from \"../core/element\";\r\nimport {\r\n isDefined\r\n} from \"../core/utils/type\";\r\nimport devices from \"../core/devices\";\r\nimport registerComponent from \"../core/component_registrator\";\r\nimport CollectionWidget from \"./collection/ui.collection_widget.live_update\";\r\nimport Swipeable from \"../events/gesture/swipeable\";\r\nimport {\r\n Deferred\r\n} from \"../core/utils/deferred\";\r\nvar MULTIVIEW_CLASS = \"dx-multiview\";\r\nvar MULTIVIEW_WRAPPER_CLASS = \"dx-multiview-wrapper\";\r\nvar MULTIVIEW_ITEM_CONTAINER_CLASS = \"dx-multiview-item-container\";\r\nvar MULTIVIEW_ITEM_CLASS = \"dx-multiview-item\";\r\nvar MULTIVIEW_ITEM_HIDDEN_CLASS = \"dx-multiview-item-hidden\";\r\nvar MULTIVIEW_ITEM_DATA_KEY = \"dxMultiViewItemData\";\r\nvar MULTIVIEW_ANIMATION_DURATION = 200;\r\nvar toNumber = value => +value;\r\nvar position = $element => locate($element).left;\r\nvar MultiView = CollectionWidget.inherit({\r\n _activeStateUnit: \".\" + MULTIVIEW_ITEM_CLASS,\r\n _supportedKeys: function() {\r\n return extend(this.callBase(), {\r\n pageUp: noop,\r\n pageDown: noop\r\n })\r\n },\r\n _getDefaultOptions: function() {\r\n return extend(this.callBase(), {\r\n selectedIndex: 0,\r\n swipeEnabled: true,\r\n animationEnabled: true,\r\n loop: false,\r\n deferRendering: true,\r\n _itemAttributes: {\r\n role: \"tabpanel\"\r\n },\r\n loopItemFocus: false,\r\n selectOnFocus: true,\r\n selectionMode: \"single\",\r\n selectionRequired: true,\r\n selectionByClick: false\r\n })\r\n },\r\n _defaultOptionsRules: function() {\r\n return this.callBase().concat([{\r\n device: function() {\r\n return \"desktop\" === devices.real().deviceType && !devices.isSimulator()\r\n },\r\n options: {\r\n focusStateEnabled: true\r\n }\r\n }])\r\n },\r\n _itemClass: function() {\r\n return MULTIVIEW_ITEM_CLASS\r\n },\r\n _itemDataKey: function() {\r\n return MULTIVIEW_ITEM_DATA_KEY\r\n },\r\n _itemContainer: function() {\r\n return this._$itemContainer\r\n },\r\n _itemElements: function() {\r\n return this._itemContainer().children(this._itemSelector())\r\n },\r\n _itemWidth: function() {\r\n if (!this._itemWidthValue) {\r\n this._itemWidthValue = getWidth(this._$wrapper)\r\n }\r\n return this._itemWidthValue\r\n },\r\n _clearItemWidthCache: function() {\r\n delete this._itemWidthValue\r\n },\r\n _itemsCount: function() {\r\n return this.option(\"items\").length\r\n },\r\n _normalizeIndex: function(index) {\r\n var count = this._itemsCount();\r\n if (index < 0) {\r\n index += count\r\n }\r\n if (index >= count) {\r\n index -= count\r\n }\r\n return index\r\n },\r\n _getRTLSignCorrection: function() {\r\n return this.option(\"rtlEnabled\") ? -1 : 1\r\n },\r\n _init: function() {\r\n this.callBase.apply(this, arguments);\r\n var $element = this.$element();\r\n $element.addClass(MULTIVIEW_CLASS);\r\n this._$wrapper = $(\"
\").addClass(MULTIVIEW_WRAPPER_CLASS);\r\n this._$wrapper.appendTo($element);\r\n this._$itemContainer = $(\"
\").addClass(MULTIVIEW_ITEM_CONTAINER_CLASS);\r\n this._$itemContainer.appendTo(this._$wrapper);\r\n this.option(\"loopItemFocus\", this.option(\"loop\"));\r\n this._initSwipeable()\r\n },\r\n _initMarkup: function() {\r\n this._deferredItems = [];\r\n this.callBase();\r\n var selectedItemIndices = this._getSelectedItemIndices();\r\n this._updateItemsVisibility(selectedItemIndices[0])\r\n },\r\n _afterItemElementDeleted: function($item, deletedActionArgs) {\r\n this.callBase($item, deletedActionArgs);\r\n if (this._deferredItems) {\r\n this._deferredItems.splice(deletedActionArgs.itemIndex, 1)\r\n }\r\n },\r\n _beforeItemElementInserted: function(change) {\r\n this.callBase.apply(this, arguments);\r\n if (this._deferredItems) {\r\n this._deferredItems.splice(change.index, 0, null)\r\n }\r\n },\r\n _executeItemRenderAction: function(index, itemData, itemElement) {\r\n index = (this.option(\"items\") || []).indexOf(itemData);\r\n this.callBase(index, itemData, itemElement)\r\n },\r\n _renderItemContent: function(args) {\r\n var renderContentDeferred = new Deferred;\r\n var that = this;\r\n var callBase = this.callBase;\r\n var deferred = new Deferred;\r\n deferred.done((function() {\r\n var $itemContent = callBase.call(that, args);\r\n renderContentDeferred.resolve($itemContent)\r\n }));\r\n this._deferredItems[args.index] = deferred;\r\n this.option(\"deferRendering\") || deferred.resolve();\r\n return renderContentDeferred.promise()\r\n },\r\n _render: function() {\r\n this.callBase();\r\n deferRender(() => {\r\n var selectedItemIndices = this._getSelectedItemIndices();\r\n this._updateItems(selectedItemIndices[0])\r\n })\r\n },\r\n _updateItems: function(selectedIndex, newIndex) {\r\n this._updateItemsPosition(selectedIndex, newIndex);\r\n this._updateItemsVisibility(selectedIndex, newIndex)\r\n },\r\n _modifyByChanges: function() {\r\n this.callBase.apply(this, arguments);\r\n var selectedItemIndices = this._getSelectedItemIndices();\r\n this._updateItemsVisibility(selectedItemIndices[0])\r\n },\r\n _updateItemsPosition: function(selectedIndex, newIndex) {\r\n var $itemElements = this._itemElements();\r\n var positionSign = isDefined(newIndex) ? -this._animationDirection(newIndex, selectedIndex) : void 0;\r\n var $selectedItem = $itemElements.eq(selectedIndex);\r\n _translator.move($selectedItem, 0);\r\n if (isDefined(newIndex)) {\r\n _translator.move($itemElements.eq(newIndex), 100 * positionSign + \"%\")\r\n }\r\n },\r\n _updateItemsVisibility: function(selectedIndex, newIndex) {\r\n var $itemElements = this._itemElements();\r\n $itemElements.each(function(itemIndex, item) {\r\n var $item = $(item);\r\n var isHidden = itemIndex !== selectedIndex && itemIndex !== newIndex;\r\n if (!isHidden) {\r\n this._renderSpecificItem(itemIndex)\r\n }\r\n $item.toggleClass(MULTIVIEW_ITEM_HIDDEN_CLASS, isHidden);\r\n this.setAria(\"hidden\", isHidden || void 0, $item)\r\n }.bind(this))\r\n },\r\n _renderSpecificItem: function(index) {\r\n var $item = this._itemElements().eq(index);\r\n var hasItemContent = $item.find(this._itemContentClass()).length > 0;\r\n if (isDefined(index) && !hasItemContent) {\r\n this._deferredItems[index].resolve();\r\n triggerResizeEvent($item)\r\n }\r\n },\r\n _refreshItem: function($item, item) {\r\n this.callBase($item, item);\r\n this._updateItemsVisibility(this.option(\"selectedIndex\"))\r\n },\r\n _setAriaSelected: noop,\r\n _updateSelection: function(addedSelection, removedSelection) {\r\n var newIndex = addedSelection[0];\r\n var prevIndex = removedSelection[0];\r\n animation.complete(this._$itemContainer);\r\n this._updateItems(prevIndex, newIndex);\r\n var animationDirection = this._animationDirection(newIndex, prevIndex);\r\n this._animateItemContainer(animationDirection * this._itemWidth(), function() {\r\n _translator.move(this._$itemContainer, 0);\r\n this._updateItems(newIndex);\r\n getWidth(this._$itemContainer)\r\n }.bind(this))\r\n },\r\n _animateItemContainer: function(position, completeCallback) {\r\n var duration = this.option(\"animationEnabled\") ? MULTIVIEW_ANIMATION_DURATION : 0;\r\n animation.moveTo(this._$itemContainer, position, duration, completeCallback)\r\n },\r\n _animationDirection: function(newIndex, prevIndex) {\r\n var containerPosition = position(this._$itemContainer);\r\n var indexDifference = (prevIndex - newIndex) * this._getRTLSignCorrection() * this._getItemFocusLoopSignCorrection();\r\n var isSwipePresent = 0 !== containerPosition;\r\n var directionSignVariable = isSwipePresent ? containerPosition : indexDifference;\r\n return sign(directionSignVariable)\r\n },\r\n _getSwipeDisabledState() {\r\n return !this.option(\"swipeEnabled\") || this._itemsCount() <= 1\r\n },\r\n _initSwipeable() {\r\n this._createComponent(this.$element(), Swipeable, {\r\n disabled: this._getSwipeDisabledState(),\r\n elastic: false,\r\n itemSizeFunc: this._itemWidth.bind(this),\r\n onStart: args => this._swipeStartHandler(args.event),\r\n onUpdated: args => this._swipeUpdateHandler(args.event),\r\n onEnd: args => this._swipeEndHandler(args.event)\r\n })\r\n },\r\n _swipeStartHandler: function(e) {\r\n animation.complete(this._$itemContainer);\r\n var selectedIndex = this.option(\"selectedIndex\");\r\n var loop = this.option(\"loop\");\r\n var lastIndex = this._itemsCount() - 1;\r\n var rtl = this.option(\"rtlEnabled\");\r\n e.maxLeftOffset = toNumber(loop || (rtl ? selectedIndex > 0 : selectedIndex < lastIndex));\r\n e.maxRightOffset = toNumber(loop || (rtl ? selectedIndex < lastIndex : selectedIndex > 0));\r\n this._swipeDirection = null\r\n },\r\n _swipeUpdateHandler: function(e) {\r\n var offset = e.offset;\r\n var swipeDirection = sign(offset) * this._getRTLSignCorrection();\r\n _translator.move(this._$itemContainer, offset * this._itemWidth());\r\n if (swipeDirection !== this._swipeDirection) {\r\n this._swipeDirection = swipeDirection;\r\n var selectedIndex = this.option(\"selectedIndex\");\r\n var newIndex = this._normalizeIndex(selectedIndex - swipeDirection);\r\n this._updateItems(selectedIndex, newIndex)\r\n }\r\n },\r\n _swipeEndHandler: function(e) {\r\n var targetOffset = e.targetOffset * this._getRTLSignCorrection();\r\n if (targetOffset) {\r\n this.option(\"selectedIndex\", this._normalizeIndex(this.option(\"selectedIndex\") - targetOffset));\r\n var $selectedElement = this.itemElements().filter(\".dx-item-selected\");\r\n this.option(\"focusStateEnabled\") && this.option(\"focusedElement\", getPublicElement($selectedElement))\r\n } else {\r\n this._animateItemContainer(0, noop)\r\n }\r\n },\r\n _getItemFocusLoopSignCorrection: function() {\r\n return this._itemFocusLooped ? -1 : 1\r\n },\r\n _moveFocus: function() {\r\n this.callBase.apply(this, arguments);\r\n this._itemFocusLooped = false\r\n },\r\n _prevItem: function($items) {\r\n var $result = this.callBase.apply(this, arguments);\r\n this._itemFocusLooped = $result.is($items.last());\r\n return $result\r\n },\r\n _nextItem: function($items) {\r\n var $result = this.callBase.apply(this, arguments);\r\n this._itemFocusLooped = $result.is($items.first());\r\n return $result\r\n },\r\n _dimensionChanged: function() {\r\n this._clearItemWidthCache()\r\n },\r\n _visibilityChanged: function(visible) {\r\n if (visible) {\r\n this._dimensionChanged()\r\n }\r\n },\r\n _updateSwipeDisabledState() {\r\n var disabled = this._getSwipeDisabledState();\r\n Swipeable.getInstance(this.$element()).option(\"disabled\", disabled)\r\n },\r\n _optionChanged: function(args) {\r\n var value = args.value;\r\n switch (args.name) {\r\n case \"loop\":\r\n this.option(\"loopItemFocus\", value);\r\n break;\r\n case \"animationEnabled\":\r\n break;\r\n case \"swipeEnabled\":\r\n this._updateSwipeDisabledState();\r\n break;\r\n case \"deferRendering\":\r\n this._invalidate();\r\n break;\r\n case \"items\":\r\n this._updateSwipeDisabledState();\r\n this.callBase(args);\r\n break;\r\n default:\r\n this.callBase(args)\r\n }\r\n }\r\n});\r\nregisterComponent(\"dxMultiView\", MultiView);\r\nexport default MultiView;\r\n","/**\r\n * DevExtreme (esm/ui/tabs/item.js)\r\n * Version: 22.2.4\r\n * Build date: Thu Jan 19 2023\r\n *\r\n * Copyright (c) 2012 - 2023 Developer Express Inc. ALL RIGHTS RESERVED\r\n * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/\r\n */\r\nimport $ from \"../../core/renderer\";\r\nimport CollectionWidgetItem from \"../collection/item\";\r\nvar TABS_ITEM_BADGE_CLASS = \"dx-tabs-item-badge\";\r\nvar BADGE_CLASS = \"dx-badge\";\r\nvar TabsItem = CollectionWidgetItem.inherit({\r\n _renderWatchers: function() {\r\n this.callBase();\r\n this._startWatcher(\"badge\", this._renderBadge.bind(this))\r\n },\r\n _renderBadge: function(badge) {\r\n this._$element.children(\".\" + BADGE_CLASS).remove();\r\n if (!badge) {\r\n return\r\n }\r\n var $badge = $(\"
\").addClass(TABS_ITEM_BADGE_CLASS).addClass(BADGE_CLASS).text(badge);\r\n this._$element.append($badge)\r\n }\r\n});\r\nexport default TabsItem;\r\n","/**\r\n * DevExtreme (esm/ui/tabs/constants.js)\r\n * Version: 22.2.4\r\n * Build date: Thu Jan 19 2023\r\n *\r\n * Copyright (c) 2012 - 2023 Developer Express Inc. ALL RIGHTS RESERVED\r\n * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/\r\n */\r\nexport var TABS_EXPANDED_CLASS = \"dx-tabs-expanded\";\r\n","/**\r\n * DevExtreme (esm/renovation/ui/scroll_view/utils/get_scroll_left_max.js)\r\n * Version: 22.2.4\r\n * Build date: Thu Jan 19 2023\r\n *\r\n * Copyright (c) 2012 - 2023 Developer Express Inc. ALL RIGHTS RESERVED\r\n * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/\r\n */\r\nexport function getScrollLeftMax(element) {\r\n return element.scrollWidth - element.clientWidth\r\n}\r\n","/**\r\n * DevExtreme (esm/renovation/ui/scroll_view/utils/get_boundary_props.js)\r\n * Version: 22.2.4\r\n * Build date: Thu Jan 19 2023\r\n *\r\n * Copyright (c) 2012 - 2023 Developer Express Inc. ALL RIGHTS RESERVED\r\n * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/\r\n */\r\nimport {\r\n getScrollLeftMax\r\n} from \"./get_scroll_left_max\";\r\nimport {\r\n getScrollTopMax\r\n} from \"./get_scroll_top_max\";\r\nimport {\r\n ScrollDirection\r\n} from \"./scroll_direction\";\r\nexport function isReachedLeft(scrollOffsetLeft, epsilon) {\r\n return Math.round(scrollOffsetLeft) <= epsilon\r\n}\r\nexport function isReachedRight(element, scrollOffsetLeft, epsilon) {\r\n return Math.round(getScrollLeftMax(element) - scrollOffsetLeft) <= epsilon\r\n}\r\nexport function isReachedTop(scrollOffsetTop, epsilon) {\r\n return Math.round(scrollOffsetTop) <= epsilon\r\n}\r\nexport function isReachedBottom(element, scrollOffsetTop, pocketHeight, epsilon) {\r\n return Math.round(getScrollTopMax(element) - scrollOffsetTop - pocketHeight) <= epsilon\r\n}\r\nexport function getBoundaryProps(direction, scrollOffset, element) {\r\n var pocketHeight = arguments.length > 3 && void 0 !== arguments[3] ? arguments[3] : 0;\r\n var {\r\n left: left,\r\n top: top\r\n } = scrollOffset;\r\n var boundaryProps = {};\r\n var {\r\n isHorizontal: isHorizontal,\r\n isVertical: isVertical\r\n } = new ScrollDirection(direction);\r\n if (isHorizontal) {\r\n boundaryProps.reachedLeft = isReachedLeft(left, 0);\r\n boundaryProps.reachedRight = isReachedRight(element, left, 0)\r\n }\r\n if (isVertical) {\r\n boundaryProps.reachedTop = isReachedTop(top, 0);\r\n boundaryProps.reachedBottom = isReachedBottom(element, top, pocketHeight, 0)\r\n }\r\n return boundaryProps\r\n}\r\n","/**\r\n * DevExtreme (esm/ui/tabs.js)\r\n * Version: 22.2.4\r\n * Build date: Thu Jan 19 2023\r\n *\r\n * Copyright (c) 2012 - 2023 Developer Express Inc. ALL RIGHTS RESERVED\r\n * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/\r\n */\r\nimport {\r\n getWidth,\r\n getOuterWidth\r\n} from \"../core/utils/size\";\r\nimport $ from \"../core/renderer\";\r\nimport eventsEngine from \"../events/core/events_engine\";\r\nimport devices from \"../core/devices\";\r\nimport registerComponent from \"../core/component_registrator\";\r\nimport Button from \"./button\";\r\nimport {\r\n render\r\n} from \"./widget/utils.ink_ripple\";\r\nimport {\r\n addNamespace\r\n} from \"../events/utils/index\";\r\nimport {\r\n extend\r\n} from \"../core/utils/extend\";\r\nimport {\r\n isPlainObject\r\n} from \"../core/utils/type\";\r\nimport pointerEvents from \"../events/pointer\";\r\nimport {\r\n each\r\n} from \"../core/utils/iterator\";\r\nimport TabsItem from \"./tabs/item\";\r\nimport {\r\n TABS_EXPANDED_CLASS\r\n} from \"./tabs/constants\";\r\nimport {\r\n isMaterial,\r\n current as currentTheme\r\n} from \"./themes\";\r\nimport holdEvent from \"../events/hold\";\r\nimport Scrollable from \"./scroll_view/ui.scrollable\";\r\nimport {\r\n default as CollectionWidget\r\n} from \"./collection/ui.collection_widget.live_update\";\r\nimport {\r\n getImageContainer\r\n} from \"../core/utils/icon\";\r\nimport {\r\n BindableTemplate\r\n} from \"../core/templates/bindable_template\";\r\nimport {\r\n Deferred,\r\n when\r\n} from \"../core/utils/deferred\";\r\nimport {\r\n isReachedLeft,\r\n isReachedRight\r\n} from \"../renovation/ui/scroll_view/utils/get_boundary_props\";\r\nimport {\r\n getScrollLeftMax\r\n} from \"../renovation/ui/scroll_view/utils/get_scroll_left_max\";\r\nvar TABS_CLASS = \"dx-tabs\";\r\nvar TABS_WRAPPER_CLASS = \"dx-tabs-wrapper\";\r\nvar TABS_STRETCHED_CLASS = \"dx-tabs-stretched\";\r\nvar TABS_SCROLLABLE_CLASS = \"dx-tabs-scrollable\";\r\nvar TABS_NAV_BUTTONS_CLASS = \"dx-tabs-nav-buttons\";\r\nvar OVERFLOW_HIDDEN_CLASS = \"dx-overflow-hidden\";\r\nvar TABS_ITEM_CLASS = \"dx-tab\";\r\nvar TABS_ITEM_SELECTED_CLASS = \"dx-tab-selected\";\r\nvar TABS_NAV_BUTTON_CLASS = \"dx-tabs-nav-button\";\r\nvar TABS_LEFT_NAV_BUTTON_CLASS = \"dx-tabs-nav-button-left\";\r\nvar TABS_RIGHT_NAV_BUTTON_CLASS = \"dx-tabs-nav-button-right\";\r\nvar TABS_ITEM_TEXT_CLASS = \"dx-tab-text\";\r\nvar TABS_ITEM_DATA_KEY = \"dxTabData\";\r\nvar BUTTON_NEXT_ICON = \"chevronnext\";\r\nvar BUTTON_PREV_ICON = \"chevronprev\";\r\nvar FEEDBACK_HIDE_TIMEOUT = 100;\r\nvar FEEDBACK_DURATION_INTERVAL = 5;\r\nvar FEEDBACK_SCROLL_TIMEOUT = 300;\r\nvar TAB_OFFSET = 30;\r\nvar Tabs = CollectionWidget.inherit({\r\n _activeStateUnit: \".\" + TABS_ITEM_CLASS,\r\n _getDefaultOptions: function() {\r\n return extend(this.callBase(), {\r\n hoverStateEnabled: true,\r\n showNavButtons: true,\r\n scrollByContent: true,\r\n scrollingEnabled: true,\r\n selectionMode: \"single\",\r\n activeStateEnabled: true,\r\n selectionRequired: false,\r\n selectOnFocus: true,\r\n loopItemFocus: false,\r\n useInkRipple: false,\r\n badgeExpr: function(data) {\r\n return data ? data.badge : void 0\r\n },\r\n _itemAttributes: {\r\n role: \"tab\"\r\n }\r\n })\r\n },\r\n _defaultOptionsRules: function() {\r\n var themeName = currentTheme();\r\n return this.callBase().concat([{\r\n device: function() {\r\n return \"desktop\" !== devices.real().deviceType\r\n },\r\n options: {\r\n showNavButtons: false\r\n }\r\n }, {\r\n device: {\r\n deviceType: \"desktop\"\r\n },\r\n options: {\r\n scrollByContent: false\r\n }\r\n }, {\r\n device: function() {\r\n return \"desktop\" === devices.real().deviceType && !devices.isSimulator()\r\n },\r\n options: {\r\n focusStateEnabled: true\r\n }\r\n }, {\r\n device: function() {\r\n return isMaterial(themeName)\r\n },\r\n options: {\r\n useInkRipple: true,\r\n selectOnFocus: false\r\n }\r\n }])\r\n },\r\n _init: function() {\r\n this.callBase();\r\n this.setAria(\"role\", \"tablist\");\r\n this.$element().addClass(TABS_CLASS);\r\n this._renderWrapper();\r\n this._renderMultiple();\r\n this._feedbackHideTimeout = FEEDBACK_HIDE_TIMEOUT\r\n },\r\n _initTemplates: function() {\r\n this.callBase();\r\n this._templateManager.addDefaultTemplates({\r\n item: new BindableTemplate(function($container, data) {\r\n if (isPlainObject(data)) {\r\n this._prepareDefaultItemTemplate(data, $container)\r\n } else {\r\n $container.text(String(data))\r\n }\r\n var $iconElement = getImageContainer(data.icon);\r\n $iconElement && $iconElement.prependTo($container);\r\n $container.wrapInner($(\"
\").addClass(TABS_ITEM_TEXT_CLASS))\r\n }.bind(this), [\"text\", \"html\", \"icon\"], this.option(\"integrationOptions.watchMethod\"))\r\n })\r\n },\r\n _createItemByTemplate: function(itemTemplate, renderArgs) {\r\n var {\r\n itemData: itemData,\r\n container: container,\r\n index: index\r\n } = renderArgs;\r\n this._deferredTemplates[index] = new Deferred;\r\n return itemTemplate.render({\r\n model: itemData,\r\n container: container,\r\n index: index,\r\n onRendered: () => this._deferredTemplates[index].resolve()\r\n })\r\n },\r\n _itemClass: function() {\r\n return TABS_ITEM_CLASS\r\n },\r\n _selectedItemClass: function() {\r\n return TABS_ITEM_SELECTED_CLASS\r\n },\r\n _itemDataKey: function() {\r\n return TABS_ITEM_DATA_KEY\r\n },\r\n _initMarkup: function() {\r\n this._deferredTemplates = [];\r\n this.callBase();\r\n this.option(\"useInkRipple\") && this._renderInkRipple();\r\n this.$element().addClass(OVERFLOW_HIDDEN_CLASS)\r\n },\r\n _render: function() {\r\n this.callBase();\r\n this._deferRenderScrolling()\r\n },\r\n _deferRenderScrolling() {\r\n when.apply(this, this._deferredTemplates).done(() => this._renderScrolling())\r\n },\r\n _renderScrolling: function() {\r\n var removeClasses = [TABS_STRETCHED_CLASS, TABS_EXPANDED_CLASS, OVERFLOW_HIDDEN_CLASS];\r\n this.$element().removeClass(removeClasses.join(\" \"));\r\n if (this.option(\"scrollingEnabled\") && this._isItemsWidthExceeded()) {\r\n if (!this._scrollable) {\r\n this._renderScrollable();\r\n this._renderNavButtons()\r\n }\r\n var scrollable = this.getScrollable();\r\n scrollable.update();\r\n if (this.option(\"rtlEnabled\")) {\r\n var maxLeftOffset = getScrollLeftMax($(this.getScrollable().container()).get(0));\r\n scrollable.scrollTo({\r\n left: maxLeftOffset\r\n })\r\n }\r\n this._updateNavButtonsVisibility();\r\n this._scrollToItem(this.option(\"selectedItem\"))\r\n }\r\n if (!(this.option(\"scrollingEnabled\") && this._isItemsWidthExceeded())) {\r\n this._cleanScrolling();\r\n if (this._needStretchItems() && !this._isItemsWidthExceeded()) {\r\n this.$element().addClass(TABS_STRETCHED_CLASS)\r\n }\r\n this.$element().removeClass(TABS_NAV_BUTTONS_CLASS).addClass(TABS_EXPANDED_CLASS)\r\n }\r\n },\r\n _isItemsWidthExceeded: function() {\r\n var tabItemsWidth = this._getSummaryItemsWidth(this._getVisibleItems(), true);\r\n return tabItemsWidth - 1 > getWidth(this.$element())\r\n },\r\n _needStretchItems: function() {\r\n var $visibleItems = this._getVisibleItems();\r\n var elementWidth = getWidth(this.$element());\r\n var itemsWidth = [];\r\n each($visibleItems, (_, item) => {\r\n itemsWidth.push(getOuterWidth(item, true))\r\n });\r\n var maxTabWidth = Math.max.apply(null, itemsWidth);\r\n return maxTabWidth >= elementWidth / $visibleItems.length\r\n },\r\n _cleanNavButtons: function() {\r\n if (!this._leftButton || !this._rightButton) {\r\n return\r\n }\r\n this._leftButton.$element().remove();\r\n this._rightButton.$element().remove();\r\n this._leftButton = null;\r\n this._rightButton = null\r\n },\r\n _cleanScrolling: function() {\r\n if (!this._scrollable) {\r\n return\r\n }\r\n this._$wrapper.appendTo(this.$element());\r\n this._scrollable.$element().remove();\r\n this._scrollable = null;\r\n this._cleanNavButtons()\r\n },\r\n _renderInkRipple: function() {\r\n this._inkRipple = render()\r\n },\r\n _toggleActiveState: function($element, value, e) {\r\n this.callBase.apply(this, arguments);\r\n if (!this._inkRipple) {\r\n return\r\n }\r\n var config = {\r\n element: $element,\r\n event: e\r\n };\r\n if (value) {\r\n this._inkRipple.showWave(config)\r\n } else {\r\n this._inkRipple.hideWave(config)\r\n }\r\n },\r\n _renderMultiple: function() {\r\n if (\"multiple\" === this.option(\"selectionMode\")) {\r\n this.option(\"selectOnFocus\", false)\r\n }\r\n },\r\n _renderWrapper: function() {\r\n this._$wrapper = $(\"\").addClass(TABS_WRAPPER_CLASS);\r\n this.$element().append(this._$wrapper)\r\n },\r\n _itemContainer: function() {\r\n return this._$wrapper\r\n },\r\n _renderScrollable: function() {\r\n var $itemContainer = this.$element().wrapInner($(\"
\").addClass(TABS_SCROLLABLE_CLASS)).children();\r\n this._scrollable = this._createComponent($itemContainer, Scrollable, {\r\n direction: \"horizontal\",\r\n showScrollbar: \"never\",\r\n useKeyboard: false,\r\n useNative: false,\r\n scrollByContent: this.option(\"scrollByContent\"),\r\n onScroll: () => {\r\n this._updateNavButtonsVisibility()\r\n }\r\n });\r\n this.$element().append(this._scrollable.$element())\r\n },\r\n _scrollToItem: function(itemData) {\r\n if (!this._scrollable) {\r\n return\r\n }\r\n var $item = this._editStrategy.getItemElement(itemData);\r\n this._scrollable.scrollToElement($item)\r\n },\r\n _renderNavButtons: function() {\r\n this.$element().toggleClass(TABS_NAV_BUTTONS_CLASS, this.option(\"showNavButtons\"));\r\n if (!this.option(\"showNavButtons\")) {\r\n return\r\n }\r\n var rtlEnabled = this.option(\"rtlEnabled\");\r\n this._leftButton = this._createNavButton(-TAB_OFFSET, rtlEnabled ? BUTTON_NEXT_ICON : BUTTON_PREV_ICON);\r\n var $leftButton = this._leftButton.$element();\r\n $leftButton.addClass(TABS_LEFT_NAV_BUTTON_CLASS);\r\n this.$element().prepend($leftButton);\r\n this._rightButton = this._createNavButton(TAB_OFFSET, rtlEnabled ? BUTTON_PREV_ICON : BUTTON_NEXT_ICON);\r\n var $rightButton = this._rightButton.$element();\r\n $rightButton.addClass(TABS_RIGHT_NAV_BUTTON_CLASS);\r\n this.$element().append($rightButton)\r\n },\r\n _updateNavButtonsVisibility: function() {\r\n var scrollable = this.getScrollable();\r\n this._leftButton && this._leftButton.option(\"disabled\", isReachedLeft(scrollable.scrollLeft(), 1));\r\n this._rightButton && this._rightButton.option(\"disabled\", isReachedRight($(scrollable.container()).get(0), scrollable.scrollLeft(), 1))\r\n },\r\n _updateScrollPosition: function(offset, duration) {\r\n this._scrollable.update();\r\n this._scrollable.scrollBy(offset / duration)\r\n },\r\n _createNavButton: function(offset, icon) {\r\n var that = this;\r\n var holdAction = that._createAction((function() {\r\n that._holdInterval = setInterval((function() {\r\n that._updateScrollPosition(offset, FEEDBACK_DURATION_INTERVAL)\r\n }), FEEDBACK_DURATION_INTERVAL)\r\n }));\r\n var holdEventName = addNamespace(holdEvent.name, \"dxNavButton\");\r\n var pointerUpEventName = addNamespace(pointerEvents.up, \"dxNavButton\");\r\n var pointerOutEventName = addNamespace(pointerEvents.out, \"dxNavButton\");\r\n var navButton = this._createComponent($(\"
\").addClass(TABS_NAV_BUTTON_CLASS), Button, {\r\n focusStateEnabled: false,\r\n icon: icon,\r\n onClick: function() {\r\n that._updateScrollPosition(offset, 1)\r\n },\r\n integrationOptions: {}\r\n });\r\n var $navButton = navButton.$element();\r\n eventsEngine.on($navButton, holdEventName, {\r\n timeout: FEEDBACK_SCROLL_TIMEOUT\r\n }, function(e) {\r\n holdAction({\r\n event: e\r\n })\r\n }.bind(this));\r\n eventsEngine.on($navButton, pointerUpEventName, (function() {\r\n that._clearInterval()\r\n }));\r\n eventsEngine.on($navButton, pointerOutEventName, (function() {\r\n that._clearInterval()\r\n }));\r\n return navButton\r\n },\r\n _clearInterval: function() {\r\n if (this._holdInterval) {\r\n clearInterval(this._holdInterval)\r\n }\r\n },\r\n _updateSelection: function(addedSelection) {\r\n this._scrollable && this._scrollable.scrollToElement(this.itemElements().eq(addedSelection[0]), {\r\n left: 1,\r\n right: 1\r\n })\r\n },\r\n _visibilityChanged: function(visible) {\r\n if (visible) {\r\n this._dimensionChanged()\r\n }\r\n },\r\n _dimensionChanged: function() {\r\n this._renderScrolling()\r\n },\r\n _itemSelectHandler: function(e) {\r\n if (\"single\" === this.option(\"selectionMode\") && this.isItemSelected(e.currentTarget)) {\r\n return\r\n }\r\n this.callBase(e)\r\n },\r\n _clean: function() {\r\n this._deferredTemplates = [];\r\n this._cleanScrolling();\r\n this.callBase()\r\n },\r\n _optionChanged: function(args) {\r\n switch (args.name) {\r\n case \"useInkRipple\":\r\n case \"scrollingEnabled\":\r\n case \"showNavButtons\":\r\n this._invalidate();\r\n break;\r\n case \"scrollByContent\":\r\n this._scrollable && this._scrollable.option(args.name, args.value);\r\n break;\r\n case \"width\":\r\n this.callBase(args);\r\n this._dimensionChanged();\r\n break;\r\n case \"selectionMode\":\r\n this._renderMultiple();\r\n this.callBase(args);\r\n break;\r\n case \"badgeExpr\":\r\n this._invalidate();\r\n break;\r\n default:\r\n this.callBase(args)\r\n }\r\n },\r\n _afterItemElementInserted() {\r\n this.callBase();\r\n this._deferRenderScrolling()\r\n },\r\n _afterItemElementDeleted($item, deletedActionArgs) {\r\n this.callBase($item, deletedActionArgs);\r\n this._renderScrolling()\r\n },\r\n getScrollable() {\r\n return this._scrollable\r\n }\r\n});\r\nTabs.ItemClass = TabsItem;\r\nregisterComponent(\"dxTabs\", Tabs);\r\nexport default Tabs;\r\n","/**\r\n * DevExtreme (esm/ui/tab_panel/item.js)\r\n * Version: 22.2.4\r\n * Build date: Thu Jan 19 2023\r\n *\r\n * Copyright (c) 2012 - 2023 Developer Express Inc. ALL RIGHTS RESERVED\r\n * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/\r\n */\r\nimport CollectionWidgetItem from \"../collection/item\";\r\nimport {\r\n noop\r\n} from \"../../core/utils/common\";\r\nexport default class TabPanelItem extends CollectionWidgetItem {\r\n _renderWatchers() {\r\n this._startWatcher(\"badge\", noop);\r\n return super._renderWatchers()\r\n }\r\n}\r\n","/**\r\n * DevExtreme (esm/ui/tab_panel.js)\r\n * Version: 22.2.4\r\n * Build date: Thu Jan 19 2023\r\n *\r\n * Copyright (c) 2012 - 2023 Developer Express Inc. ALL RIGHTS RESERVED\r\n * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/\r\n */\r\nimport {\r\n getOuterHeight\r\n} from \"../core/utils/size\";\r\nimport $ from \"../core/renderer\";\r\nimport {\r\n touch\r\n} from \"../core/utils/support\";\r\nimport {\r\n extend\r\n} from \"../core/utils/extend\";\r\nimport devices from \"../core/devices\";\r\nimport domAdapter from \"../core/dom_adapter\";\r\nimport registerComponent from \"../core/component_registrator\";\r\nimport MultiView from \"./multi_view\";\r\nimport Tabs from \"./tabs\";\r\nimport {\r\n default as TabPanelItem\r\n} from \"./tab_panel/item\";\r\nimport {\r\n getImageContainer\r\n} from \"../core/utils/icon\";\r\nimport {\r\n getPublicElement\r\n} from \"../core/element\";\r\nimport {\r\n isPlainObject,\r\n isDefined\r\n} from \"../core/utils/type\";\r\nimport {\r\n BindableTemplate\r\n} from \"../core/templates/bindable_template\";\r\nimport {\r\n hasWindow\r\n} from \"../core/utils/window\";\r\nvar TABPANEL_CLASS = \"dx-tabpanel\";\r\nvar TABPANEL_TABS_CLASS = \"dx-tabpanel-tabs\";\r\nvar TABPANEL_CONTAINER_CLASS = \"dx-tabpanel-container\";\r\nvar TABS_ITEM_TEXT_CLASS = \"dx-tab-text\";\r\nvar TabPanel = MultiView.inherit({\r\n _getDefaultOptions: function() {\r\n return extend(this.callBase(), {\r\n itemTitleTemplate: \"title\",\r\n hoverStateEnabled: true,\r\n showNavButtons: false,\r\n scrollByContent: true,\r\n scrollingEnabled: true,\r\n onTitleClick: null,\r\n onTitleHold: null,\r\n onTitleRendered: null,\r\n badgeExpr: function(data) {\r\n return data ? data.badge : void 0\r\n }\r\n })\r\n },\r\n _defaultOptionsRules: function() {\r\n return this.callBase().concat([{\r\n device: function() {\r\n return \"desktop\" === devices.real().deviceType && !devices.isSimulator()\r\n },\r\n options: {\r\n focusStateEnabled: true\r\n }\r\n }, {\r\n device: function() {\r\n return !touch\r\n },\r\n options: {\r\n swipeEnabled: false\r\n }\r\n }, {\r\n device: {\r\n platform: \"generic\"\r\n },\r\n options: {\r\n animationEnabled: false\r\n }\r\n }])\r\n },\r\n _init: function() {\r\n this.callBase();\r\n this.$element().addClass(TABPANEL_CLASS);\r\n this.setAria(\"role\", \"tabpanel\")\r\n },\r\n _initMarkup: function() {\r\n this.callBase();\r\n this._createTitleActions();\r\n this._renderLayout()\r\n },\r\n _initTemplates: function() {\r\n this.callBase();\r\n this._templateManager.addDefaultTemplates({\r\n title: new BindableTemplate((function($container, data) {\r\n if (isPlainObject(data)) {\r\n var $iconElement = getImageContainer(data.icon);\r\n if ($iconElement) {\r\n $container.append($iconElement)\r\n }\r\n if (isDefined(data.title) && !isPlainObject(data.title)) {\r\n $container.append(domAdapter.createTextNode(data.title))\r\n }\r\n } else if (isDefined(data)) {\r\n $container.text(String(data))\r\n }\r\n $container.wrapInner($(\"
\").addClass(TABS_ITEM_TEXT_CLASS))\r\n }), [\"title\", \"icon\"], this.option(\"integrationOptions.watchMethod\"))\r\n })\r\n },\r\n _createTitleActions: function() {\r\n this._createTitleClickAction();\r\n this._createTitleHoldAction();\r\n this._createTitleRenderedAction()\r\n },\r\n _createTitleClickAction: function() {\r\n this._titleClickAction = this._createActionByOption(\"onTitleClick\")\r\n },\r\n _createTitleHoldAction: function() {\r\n this._titleHoldAction = this._createActionByOption(\"onTitleHold\")\r\n },\r\n _createTitleRenderedAction: function() {\r\n this._titleRenderedAction = this._createActionByOption(\"onTitleRendered\")\r\n },\r\n _renderContent: function() {\r\n var that = this;\r\n this.callBase();\r\n if (this.option(\"templatesRenderAsynchronously\")) {\r\n this._resizeEventTimer = setTimeout((function() {\r\n that._updateLayout()\r\n }), 0)\r\n }\r\n },\r\n _renderLayout: function() {\r\n if (this._tabs) {\r\n this._updateLayout();\r\n return\r\n }\r\n var $element = this.$element();\r\n this._$tabContainer = $(\"\").addClass(TABPANEL_TABS_CLASS).appendTo($element);\r\n var $tabs = $(\"
\").appendTo(this._$tabContainer);\r\n this._tabs = this._createComponent($tabs, Tabs, this._tabConfig());\r\n this._$container = $(\"
\").addClass(TABPANEL_CONTAINER_CLASS).appendTo($element);\r\n this._$container.append(this._$wrapper);\r\n this._updateLayout()\r\n },\r\n _updateLayout: function() {\r\n if (hasWindow()) {\r\n var tabsHeight = getOuterHeight(this._$tabContainer);\r\n this._$container.css({\r\n marginTop: -tabsHeight,\r\n paddingTop: tabsHeight\r\n })\r\n }\r\n },\r\n _refreshActiveDescendant: function() {\r\n if (!this._tabs) {\r\n return\r\n }\r\n var tabs = this._tabs;\r\n var tabItems = tabs.itemElements();\r\n var $activeTab = $(tabItems[tabs.option(\"selectedIndex\")]);\r\n var id = this.getFocusedItemId();\r\n this.setAria(\"controls\", void 0, $(tabItems));\r\n this.setAria(\"controls\", id, $activeTab)\r\n },\r\n _tabConfig: function() {\r\n return {\r\n selectOnFocus: true,\r\n focusStateEnabled: this.option(\"focusStateEnabled\"),\r\n hoverStateEnabled: this.option(\"hoverStateEnabled\"),\r\n repaintChangesOnly: this.option(\"repaintChangesOnly\"),\r\n tabIndex: this.option(\"tabIndex\"),\r\n selectedIndex: this.option(\"selectedIndex\"),\r\n badgeExpr: this.option(\"badgeExpr\"),\r\n onItemClick: this._titleClickAction.bind(this),\r\n onItemHold: this._titleHoldAction.bind(this),\r\n itemHoldTimeout: this.option(\"itemHoldTimeout\"),\r\n onSelectionChanged: function(e) {\r\n this.option(\"selectedIndex\", e.component.option(\"selectedIndex\"));\r\n this._refreshActiveDescendant()\r\n }.bind(this),\r\n onItemRendered: this._titleRenderedAction.bind(this),\r\n itemTemplate: this._getTemplateByOption(\"itemTitleTemplate\"),\r\n items: this.option(\"items\"),\r\n noDataText: null,\r\n scrollingEnabled: this.option(\"scrollingEnabled\"),\r\n scrollByContent: this.option(\"scrollByContent\"),\r\n showNavButtons: this.option(\"showNavButtons\"),\r\n itemTemplateProperty: \"tabTemplate\",\r\n loopItemFocus: this.option(\"loop\"),\r\n selectionRequired: true,\r\n onOptionChanged: function(args) {\r\n if (\"focusedElement\" === args.name) {\r\n if (args.value) {\r\n var $value = $(args.value);\r\n var $newItem = this._itemElements().eq($value.index());\r\n this.option(\"focusedElement\", getPublicElement($newItem))\r\n } else {\r\n this.option(\"focusedElement\", args.value)\r\n }\r\n }\r\n }.bind(this),\r\n onFocusIn: function(args) {\r\n this._focusInHandler(args.event)\r\n }.bind(this),\r\n onFocusOut: function(args) {\r\n if (!this._isFocusOutHandlerExecuting) {\r\n this._focusOutHandler(args.event)\r\n }\r\n }.bind(this)\r\n }\r\n },\r\n _renderFocusTarget: function() {\r\n this._focusTarget().attr(\"tabIndex\", -1)\r\n },\r\n _updateFocusState: function(e, isFocused) {\r\n this.callBase(e, isFocused);\r\n if (e.target === this._tabs._focusTarget().get(0)) {\r\n this._toggleFocusClass(isFocused, this._focusTarget())\r\n }\r\n },\r\n _focusOutHandler: function(e) {\r\n this._isFocusOutHandlerExecuting = true;\r\n this.callBase.apply(this, arguments);\r\n this._tabs._focusOutHandler(e);\r\n this._isFocusOutHandlerExecuting = false\r\n },\r\n _setTabsOption: function(name, value) {\r\n if (this._tabs) {\r\n this._tabs.option(name, value)\r\n }\r\n },\r\n _visibilityChanged: function(visible) {\r\n if (visible) {\r\n this._tabs._dimensionChanged();\r\n this._updateLayout()\r\n }\r\n },\r\n registerKeyHandler: function(key, handler) {\r\n this.callBase(key, handler);\r\n if (this._tabs) {\r\n this._tabs.registerKeyHandler(key, handler)\r\n }\r\n },\r\n repaint: function() {\r\n this.callBase();\r\n this._tabs.repaint()\r\n },\r\n _optionChanged: function(args) {\r\n var name = args.name;\r\n var value = args.value;\r\n var fullName = args.fullName;\r\n switch (name) {\r\n case \"dataSource\":\r\n this.callBase(args);\r\n break;\r\n case \"items\":\r\n this._setTabsOption(name, this.option(name));\r\n this._updateLayout();\r\n if (!this.option(\"repaintChangesOnly\")) {\r\n this._tabs.repaint()\r\n }\r\n this.callBase(args);\r\n break;\r\n case \"width\":\r\n this.callBase(args);\r\n this._tabs.repaint();\r\n break;\r\n case \"selectedIndex\":\r\n case \"selectedItem\":\r\n this._setTabsOption(fullName, value);\r\n this.callBase(args);\r\n if (true === this.option(\"focusStateEnabled\")) {\r\n var selectedIndex = this.option(\"selectedIndex\");\r\n var selectedTabContent = this._itemElements().eq(selectedIndex);\r\n this.option(\"focusedElement\", getPublicElement(selectedTabContent))\r\n }\r\n break;\r\n case \"itemHoldTimeout\":\r\n case \"focusStateEnabled\":\r\n case \"hoverStateEnabled\":\r\n this._setTabsOption(fullName, value);\r\n this.callBase(args);\r\n break;\r\n case \"scrollingEnabled\":\r\n case \"scrollByContent\":\r\n case \"showNavButtons\":\r\n this._setTabsOption(fullName, value);\r\n break;\r\n case \"focusedElement\":\r\n var id = value ? $(value).index() : value;\r\n var newItem = value ? this._tabs._itemElements().eq(id) : value;\r\n this._setTabsOption(\"focusedElement\", getPublicElement(newItem));\r\n this.callBase(args);\r\n break;\r\n case \"itemTitleTemplate\":\r\n this._setTabsOption(\"itemTemplate\", this._getTemplateByOption(\"itemTitleTemplate\"));\r\n break;\r\n case \"onTitleClick\":\r\n this._createTitleClickAction();\r\n this._setTabsOption(\"onItemClick\", this._titleClickAction.bind(this));\r\n break;\r\n case \"onTitleHold\":\r\n this._createTitleHoldAction();\r\n this._setTabsOption(\"onItemHold\", this._titleHoldAction.bind(this));\r\n break;\r\n case \"onTitleRendered\":\r\n this._createTitleRenderedAction();\r\n this._setTabsOption(\"onItemRendered\", this._titleRenderedAction.bind(this));\r\n break;\r\n case \"loop\":\r\n this._setTabsOption(\"loopItemFocus\", value);\r\n break;\r\n case \"badgeExpr\":\r\n this._invalidate();\r\n break;\r\n default:\r\n this.callBase(args)\r\n }\r\n },\r\n _clean: function() {\r\n clearTimeout(this._resizeEventTimer);\r\n this.callBase()\r\n }\r\n});\r\nTabPanel.ItemClass = TabPanelItem;\r\nregisterComponent(\"dxTabPanel\", TabPanel);\r\nexport default TabPanel;\r\n","/**\r\n * DevExtreme (esm/ui/form/ui.form.item_option_action.js)\r\n * Version: 22.2.4\r\n * Build date: Thu Jan 19 2023\r\n *\r\n * Copyright (c) 2012 - 2023 Developer Express Inc. ALL RIGHTS RESERVED\r\n * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/\r\n */\r\nimport Class from \"../../core/class\";\r\nexport default class ItemOptionAction {\r\n constructor(options) {\r\n this._options = options;\r\n this._itemsRunTimeInfo = this._options.itemsRunTimeInfo\r\n }\r\n findInstance() {\r\n return this._itemsRunTimeInfo.findWidgetInstanceByItem(this._options.item)\r\n }\r\n findItemContainer() {\r\n return this._itemsRunTimeInfo.findItemContainerByItem(this._options.item)\r\n }\r\n findPreparedItem() {\r\n return this._itemsRunTimeInfo.findPreparedItemByItem(this._options.item)\r\n }\r\n tryExecute() {\r\n Class.abstract()\r\n }\r\n}\r\n","/**\r\n * DevExtreme (esm/ui/form/ui.form.utils.js)\r\n * Version: 22.2.4\r\n * Build date: Thu Jan 19 2023\r\n *\r\n * Copyright (c) 2012 - 2023 Developer Express Inc. ALL RIGHTS RESERVED\r\n * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/\r\n */\r\nimport {\r\n isDefined\r\n} from \"../../core/utils/type\";\r\nimport {\r\n extend\r\n} from \"../../core/utils/extend\";\r\nexport var createItemPathByIndex = (index, isTabs) => \"\".concat(isTabs ? \"tabs\" : \"items\", \"[\").concat(index, \"]\");\r\nexport var concatPaths = (path1, path2) => {\r\n if (isDefined(path1) && isDefined(path2)) {\r\n return \"\".concat(path1, \".\").concat(path2)\r\n }\r\n return path1 || path2\r\n};\r\nexport var getTextWithoutSpaces = text => text ? text.replace(/\\s/g, \"\") : void 0;\r\nexport var isEqualToDataFieldOrNameOrTitleOrCaption = (item, fieldName) => {\r\n if (item) {\r\n return item.dataField === fieldName || item.name === fieldName || getTextWithoutSpaces(item.title) === fieldName || \"group\" === item.itemType && getTextWithoutSpaces(item.caption) === fieldName\r\n }\r\n return false\r\n};\r\nexport var getFullOptionName = (path, optionName) => \"\".concat(path, \".\").concat(optionName);\r\nexport var getOptionNameFromFullName = fullName => {\r\n var parts = fullName.split(\".\");\r\n return parts[parts.length - 1].replace(/\\[\\d+]/, \"\")\r\n};\r\nexport var tryGetTabPath = fullPath => {\r\n var pathParts = fullPath.split(\".\");\r\n var resultPathParts = [...pathParts];\r\n for (var i = pathParts.length - 1; i >= 0; i--) {\r\n if (isFullPathContainsTabs(pathParts[i])) {\r\n return resultPathParts.join(\".\")\r\n }\r\n resultPathParts.splice(i, 1)\r\n }\r\n return \"\"\r\n};\r\nexport var isFullPathContainsTabs = fullPath => fullPath.indexOf(\"tabs\") > -1;\r\nexport var getItemPath = (items, item, isTabs) => {\r\n var index = items.indexOf(item);\r\n if (index > -1) {\r\n return createItemPathByIndex(index, isTabs)\r\n }\r\n for (var i = 0; i < items.length; i++) {\r\n var targetItem = items[i];\r\n var tabOrGroupItems = targetItem.tabs || targetItem.items;\r\n if (tabOrGroupItems) {\r\n var itemPath = getItemPath(tabOrGroupItems, item, targetItem.tabs);\r\n if (itemPath) {\r\n return concatPaths(createItemPathByIndex(i, isTabs), itemPath)\r\n }\r\n }\r\n }\r\n};\r\nexport function convertToLayoutManagerOptions(_ref) {\r\n var {\r\n form: form,\r\n $formElement: $formElement,\r\n formOptions: formOptions,\r\n items: items,\r\n validationGroup: validationGroup,\r\n extendedLayoutManagerOptions: extendedLayoutManagerOptions,\r\n onFieldDataChanged: onFieldDataChanged,\r\n onContentReady: onContentReady,\r\n onDisposing: onDisposing,\r\n onFieldItemRendered: onFieldItemRendered\r\n } = _ref;\r\n var baseOptions = {\r\n form: form,\r\n items: items,\r\n $formElement: $formElement,\r\n validationGroup: validationGroup,\r\n onFieldDataChanged: onFieldDataChanged,\r\n onContentReady: onContentReady,\r\n onDisposing: onDisposing,\r\n onFieldItemRendered: onFieldItemRendered,\r\n validationBoundary: formOptions.scrollingEnabled ? $formElement : void 0,\r\n scrollingEnabled: formOptions.scrollingEnabled,\r\n showRequiredMark: formOptions.showRequiredMark,\r\n showOptionalMark: formOptions.showOptionalMark,\r\n requiredMark: formOptions.requiredMark,\r\n optionalMark: formOptions.optionalMark,\r\n requiredMessage: formOptions.requiredMessage,\r\n screenByWidth: formOptions.screenByWidth,\r\n layoutData: formOptions.formData,\r\n labelLocation: formOptions.labelLocation,\r\n customizeItem: formOptions.customizeItem,\r\n minColWidth: formOptions.minColWidth,\r\n showColonAfterLabel: formOptions.showColonAfterLabel,\r\n onEditorEnterKey: formOptions.onEditorEnterKey,\r\n labelMode: formOptions.labelMode\r\n };\r\n var result = extend(baseOptions, {\r\n isRoot: extendedLayoutManagerOptions.isRoot,\r\n colCount: extendedLayoutManagerOptions.colCount,\r\n alignItemLabels: extendedLayoutManagerOptions.alignItemLabels,\r\n cssItemClass: extendedLayoutManagerOptions.cssItemClass,\r\n colCountByScreen: extendedLayoutManagerOptions.colCountByScreen,\r\n onLayoutChanged: extendedLayoutManagerOptions.onLayoutChanged,\r\n width: extendedLayoutManagerOptions.width\r\n });\r\n return result\r\n}\r\n","/**\r\n * DevExtreme (esm/ui/form/ui.form.item_options_actions.js)\r\n * Version: 22.2.4\r\n * Build date: Thu Jan 19 2023\r\n *\r\n * Copyright (c) 2012 - 2023 Developer Express Inc. ALL RIGHTS RESERVED\r\n * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/\r\n */\r\nimport ItemOptionAction from \"./ui.form.item_option_action\";\r\nimport {\r\n data\r\n} from \"../../core/element_data\";\r\nimport {\r\n extend\r\n} from \"../../core/utils/extend\";\r\nimport {\r\n getFullOptionName\r\n} from \"./ui.form.utils\";\r\nclass WidgetOptionItemOptionAction extends ItemOptionAction {\r\n tryExecute() {\r\n var {\r\n value: value\r\n } = this._options;\r\n var instance = this.findInstance();\r\n if (instance) {\r\n instance.option(value);\r\n return true\r\n }\r\n return false\r\n }\r\n}\r\nclass TabOptionItemOptionAction extends ItemOptionAction {\r\n tryExecute() {\r\n var tabPanel = this.findInstance();\r\n if (tabPanel) {\r\n var {\r\n optionName: optionName,\r\n item: item,\r\n value: value\r\n } = this._options;\r\n var itemIndex = this._itemsRunTimeInfo.findItemIndexByItem(item);\r\n if (itemIndex >= 0) {\r\n tabPanel.option(getFullOptionName(\"items[\".concat(itemIndex, \"]\"), optionName), value);\r\n return true\r\n }\r\n }\r\n return false\r\n }\r\n}\r\nclass SimpleItemTemplateChangedAction extends ItemOptionAction {\r\n tryExecute() {\r\n return false\r\n }\r\n}\r\nclass GroupItemTemplateChangedAction extends ItemOptionAction {\r\n tryExecute() {\r\n var preparedItem = this.findPreparedItem();\r\n if (null != preparedItem && preparedItem._prepareGroupItemTemplate && preparedItem._renderGroupContentTemplate) {\r\n preparedItem._prepareGroupItemTemplate(this._options.item.template);\r\n preparedItem._renderGroupContentTemplate();\r\n return true\r\n }\r\n return false\r\n }\r\n}\r\nclass TabsOptionItemOptionAction extends ItemOptionAction {\r\n tryExecute() {\r\n var tabPanel = this.findInstance();\r\n if (tabPanel) {\r\n var {\r\n value: value\r\n } = this._options;\r\n tabPanel.option(\"dataSource\", value);\r\n return true\r\n }\r\n return false\r\n }\r\n}\r\nclass ValidationRulesItemOptionAction extends ItemOptionAction {\r\n tryExecute() {\r\n var {\r\n item: item\r\n } = this._options;\r\n var instance = this.findInstance();\r\n var validator = instance && data(instance.$element()[0], \"dxValidator\");\r\n if (validator && item) {\r\n var filterRequired = item => \"required\" === item.type;\r\n var oldContainsRequired = (validator.option(\"validationRules\") || []).some(filterRequired);\r\n var newContainsRequired = (item.validationRules || []).some(filterRequired);\r\n if (!oldContainsRequired && !newContainsRequired || oldContainsRequired && newContainsRequired) {\r\n validator.option(\"validationRules\", item.validationRules);\r\n return true\r\n }\r\n }\r\n return false\r\n }\r\n}\r\nclass CssClassItemOptionAction extends ItemOptionAction {\r\n tryExecute() {\r\n var $itemContainer = this.findItemContainer();\r\n var {\r\n previousValue: previousValue,\r\n value: value\r\n } = this._options;\r\n if ($itemContainer) {\r\n $itemContainer.removeClass(previousValue).addClass(value);\r\n return true\r\n }\r\n return false\r\n }\r\n}\r\nvar tryCreateItemOptionAction = (optionName, itemActionOptions) => {\r\n switch (optionName) {\r\n case \"editorOptions\":\r\n case \"buttonOptions\":\r\n return new WidgetOptionItemOptionAction(itemActionOptions);\r\n case \"validationRules\":\r\n return new ValidationRulesItemOptionAction(itemActionOptions);\r\n case \"cssClass\":\r\n return new CssClassItemOptionAction(itemActionOptions);\r\n case \"badge\":\r\n case \"disabled\":\r\n case \"icon\":\r\n case \"tabTemplate\":\r\n case \"title\":\r\n return new TabOptionItemOptionAction(extend(itemActionOptions, {\r\n optionName: optionName\r\n }));\r\n case \"tabs\":\r\n return new TabsOptionItemOptionAction(itemActionOptions);\r\n case \"template\":\r\n var _itemActionOptions$it, _itemActionOptions$it2, _itemActionOptions$it3;\r\n var itemType = null !== (_itemActionOptions$it = null === itemActionOptions || void 0 === itemActionOptions ? void 0 : null === (_itemActionOptions$it2 = itemActionOptions.item) || void 0 === _itemActionOptions$it2 ? void 0 : _itemActionOptions$it2.itemType) && void 0 !== _itemActionOptions$it ? _itemActionOptions$it : null === (_itemActionOptions$it3 = itemActionOptions.itemsRunTimeInfo.findPreparedItemByItem(null === itemActionOptions || void 0 === itemActionOptions ? void 0 : itemActionOptions.item)) || void 0 === _itemActionOptions$it3 ? void 0 : _itemActionOptions$it3.itemType;\r\n if (\"simple\" === itemType) {\r\n return new SimpleItemTemplateChangedAction(itemActionOptions)\r\n } else if (\"group\" === itemType) {\r\n return new GroupItemTemplateChangedAction(itemActionOptions)\r\n }\r\n return new TabOptionItemOptionAction(extend(itemActionOptions, {\r\n optionName: optionName\r\n }));\r\n default:\r\n return null\r\n }\r\n};\r\nexport default tryCreateItemOptionAction;\r\n","/**\r\n * DevExtreme (esm/ui/responsive_box.js)\r\n * Version: 22.2.4\r\n * Build date: Thu Jan 19 2023\r\n *\r\n * Copyright (c) 2012 - 2023 Developer Express Inc. ALL RIGHTS RESERVED\r\n * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/\r\n */\r\nimport {\r\n getWidth\r\n} from \"../core/utils/size\";\r\nimport $ from \"../core/renderer\";\r\nimport {\r\n grep,\r\n noop\r\n} from \"../core/utils/common\";\r\nimport {\r\n isDefined,\r\n isPlainObject,\r\n isEmptyObject\r\n} from \"../core/utils/type\";\r\nimport errors from \"./widget/ui.errors\";\r\nimport {\r\n getWindow,\r\n defaultScreenFactorFunc,\r\n hasWindow\r\n} from \"../core/utils/window\";\r\nimport {\r\n each,\r\n map\r\n} from \"../core/utils/iterator\";\r\nimport {\r\n extend\r\n} from \"../core/utils/extend\";\r\nimport registerComponent from \"../core/component_registrator\";\r\nimport Box from \"./box\";\r\nimport CollectionWidget from \"./collection/ui.collection_widget.edit\";\r\nvar RESPONSIVE_BOX_CLASS = \"dx-responsivebox\";\r\nvar SCREEN_SIZE_CLASS_PREFIX = RESPONSIVE_BOX_CLASS + \"-screen-\";\r\nvar BOX_ITEM_CLASS = \"dx-box-item\";\r\nvar BOX_ITEM_DATA_KEY = \"dxBoxItemData\";\r\nvar HD_SCREEN_WIDTH = 1920;\r\nvar ResponsiveBox = CollectionWidget.inherit({\r\n _getDefaultOptions: function() {\r\n return extend(this.callBase(), {\r\n rows: [],\r\n cols: [],\r\n screenByWidth: null,\r\n singleColumnScreen: \"\",\r\n height: \"100%\",\r\n width: \"100%\",\r\n activeStateEnabled: false,\r\n focusStateEnabled: false,\r\n onItemStateChanged: void 0,\r\n onLayoutChanged: null,\r\n currentScreenFactor: void 0\r\n })\r\n },\r\n _init: function() {\r\n if (!this.option(\"screenByWidth\")) {\r\n this._options.silent(\"screenByWidth\", defaultScreenFactorFunc)\r\n }\r\n this.callBase();\r\n this._initLayoutChangedAction()\r\n },\r\n _initLayoutChangedAction: function() {\r\n this._layoutChangedAction = this._createActionByOption(\"onLayoutChanged\", {\r\n excludeValidators: [\"disabled\", \"readonly\"]\r\n })\r\n },\r\n _itemClass: function() {\r\n return BOX_ITEM_CLASS\r\n },\r\n _itemDataKey: function() {\r\n return BOX_ITEM_DATA_KEY\r\n },\r\n _initMarkup: function() {\r\n this.callBase();\r\n this.$element().addClass(RESPONSIVE_BOX_CLASS)\r\n },\r\n _renderItems: function() {\r\n this._setScreenSize();\r\n this._screenItems = this._itemsByScreen();\r\n this._prepareGrid();\r\n this._spreadItems();\r\n this._layoutItems();\r\n this._linkNodeToItem()\r\n },\r\n _itemOptionChanged: function(item) {\r\n var $item = this._findItemElementByItem(item);\r\n if (!$item.length) {\r\n return\r\n }\r\n this._refreshItem($item, item);\r\n this._clearItemNodeTemplates();\r\n this._update(true)\r\n },\r\n _setScreenSize: function() {\r\n var currentScreen = this._getCurrentScreen();\r\n this._removeScreenSizeClass();\r\n this.$element().addClass(SCREEN_SIZE_CLASS_PREFIX + currentScreen);\r\n this.option(\"currentScreenFactor\", currentScreen)\r\n },\r\n _removeScreenSizeClass: function() {\r\n var currentScreenFactor = this.option(\"currentScreenFactor\");\r\n currentScreenFactor && this.$element().removeClass(SCREEN_SIZE_CLASS_PREFIX + currentScreenFactor)\r\n },\r\n _prepareGrid: function() {\r\n var grid = this._grid = [];\r\n this._prepareRowsAndCols();\r\n each(this._rows, function() {\r\n var row = [];\r\n grid.push(row);\r\n each(this._cols, function() {\r\n row.push(this._createEmptyCell())\r\n }.bind(this))\r\n }.bind(this))\r\n },\r\n getSingleColumnRows: function() {\r\n var rows = this.option(\"rows\");\r\n var screenItemsLength = this._screenItems.length;\r\n if (rows.length) {\r\n var filteredRows = this._filterByScreen(rows);\r\n var result = [];\r\n for (var i = 0; i < screenItemsLength; i++) {\r\n var sizeConfig = this._defaultSizeConfig();\r\n if (i < filteredRows.length && isDefined(filteredRows[i].shrink)) {\r\n sizeConfig.shrink = filteredRows[i].shrink\r\n }\r\n result.push(sizeConfig)\r\n }\r\n return result\r\n } else {\r\n return this._defaultSizeConfig(screenItemsLength)\r\n }\r\n },\r\n _prepareRowsAndCols: function() {\r\n if (this._isSingleColumnScreen()) {\r\n this._prepareSingleColumnScreenItems();\r\n this._rows = this.getSingleColumnRows();\r\n this._cols = this._defaultSizeConfig(1)\r\n } else {\r\n this._rows = this._sizesByScreen(this.option(\"rows\"));\r\n this._cols = this._sizesByScreen(this.option(\"cols\"))\r\n }\r\n },\r\n _isSingleColumnScreen: function() {\r\n return this._screenRegExp().test(this.option(\"singleColumnScreen\")) || !this.option(\"rows\").length || !this.option(\"cols\").length\r\n },\r\n _prepareSingleColumnScreenItems: function() {\r\n this._screenItems.sort((function(item1, item2) {\r\n return item1.location.row - item2.location.row || item1.location.col - item2.location.col\r\n }));\r\n each(this._screenItems, (function(index, item) {\r\n extend(item.location, {\r\n row: index,\r\n col: 0,\r\n rowspan: 1,\r\n colspan: 1\r\n })\r\n }))\r\n },\r\n _sizesByScreen: function(sizeConfigs) {\r\n return map(this._filterByScreen(sizeConfigs), function(sizeConfig) {\r\n return extend(this._defaultSizeConfig(), sizeConfig)\r\n }.bind(this))\r\n },\r\n _createDefaultSizeConfig: function() {\r\n return {\r\n ratio: 1,\r\n baseSize: 0,\r\n minSize: 0,\r\n maxSize: 0\r\n }\r\n },\r\n _defaultSizeConfig: function(size) {\r\n var defaultSizeConfig = this._createDefaultSizeConfig();\r\n if (!arguments.length) {\r\n return defaultSizeConfig\r\n }\r\n var result = [];\r\n for (var i = 0; i < size; i++) {\r\n result.push(defaultSizeConfig)\r\n }\r\n return result\r\n },\r\n _filterByScreen: function(items) {\r\n var screenRegExp = this._screenRegExp();\r\n return grep(items, (function(item) {\r\n return !item.screen || screenRegExp.test(item.screen)\r\n }))\r\n },\r\n _screenRegExp: function() {\r\n var screen = this._getCurrentScreen();\r\n return new RegExp(\"(^|\\\\s)\" + screen + \"($|\\\\s)\", \"i\")\r\n },\r\n _getCurrentScreen: function() {\r\n var width = this._screenWidth();\r\n return this.option(\"screenByWidth\")(width)\r\n },\r\n _screenWidth: function() {\r\n return hasWindow() ? getWidth(getWindow()) : HD_SCREEN_WIDTH\r\n },\r\n _createEmptyCell: function() {\r\n return {\r\n item: {},\r\n location: {\r\n colspan: 1,\r\n rowspan: 1\r\n }\r\n }\r\n },\r\n _spreadItems: function() {\r\n each(this._screenItems, function(_, itemInfo) {\r\n var location = itemInfo.location || {};\r\n var itemCol = location.col;\r\n var itemRow = location.row;\r\n var row = this._grid[itemRow];\r\n var itemCell = row && row[itemCol];\r\n this._occupyCells(itemCell, itemInfo)\r\n }.bind(this))\r\n },\r\n _itemsByScreen: function() {\r\n return this.option(\"items\").reduce((result, item) => {\r\n var locations = item.location || {};\r\n locations = isPlainObject(locations) ? [locations] : locations;\r\n this._filterByScreen(locations).forEach(location => {\r\n result.push({\r\n item: item,\r\n location: extend({\r\n rowspan: 1,\r\n colspan: 1\r\n }, location)\r\n })\r\n });\r\n return result\r\n }, [])\r\n },\r\n _occupyCells: function(itemCell, itemInfo) {\r\n if (!itemCell || this._isItemCellOccupied(itemCell, itemInfo)) {\r\n return\r\n }\r\n extend(itemCell, itemInfo);\r\n this._markSpanningCell(itemCell)\r\n },\r\n _isItemCellOccupied: function(itemCell, itemInfo) {\r\n if (!isEmptyObject(itemCell.item)) {\r\n return true\r\n }\r\n var result = false;\r\n this._loopOverSpanning(itemInfo.location, (function(cell) {\r\n result = result || !isEmptyObject(cell.item)\r\n }));\r\n return result\r\n },\r\n _loopOverSpanning: function(location, callback) {\r\n var rowEnd = location.row + location.rowspan - 1;\r\n var colEnd = location.col + location.colspan - 1;\r\n var boundRowEnd = Math.min(rowEnd, this._rows.length - 1);\r\n var boundColEnd = Math.min(colEnd, this._cols.length - 1);\r\n location.rowspan -= rowEnd - boundRowEnd;\r\n location.colspan -= colEnd - boundColEnd;\r\n for (var rowIndex = location.row; rowIndex <= boundRowEnd; rowIndex++) {\r\n for (var colIndex = location.col; colIndex <= boundColEnd; colIndex++) {\r\n if (rowIndex !== location.row || colIndex !== location.col) {\r\n callback(this._grid[rowIndex][colIndex])\r\n }\r\n }\r\n }\r\n },\r\n _markSpanningCell: function(itemCell) {\r\n this._loopOverSpanning(itemCell.location, (function(cell) {\r\n extend(cell, {\r\n item: itemCell.item,\r\n spanningCell: itemCell\r\n })\r\n }))\r\n },\r\n _linkNodeToItem: function() {\r\n each(this._itemElements(), (function(_, itemNode) {\r\n var $item = $(itemNode);\r\n var item = $item.data(BOX_ITEM_DATA_KEY);\r\n if (!item.box) {\r\n item.node = $item.children()\r\n }\r\n }))\r\n },\r\n _layoutItems: function() {\r\n var rowsCount = this._grid.length;\r\n var colsCount = rowsCount && this._grid[0].length;\r\n if (!rowsCount && !colsCount) {\r\n return\r\n }\r\n var result = this._layoutBlock({\r\n direction: \"col\",\r\n row: {\r\n start: 0,\r\n end: rowsCount - 1\r\n },\r\n col: {\r\n start: 0,\r\n end: colsCount - 1\r\n }\r\n });\r\n var rootBox = this._prepareBoxConfig(result.box || {\r\n direction: \"row\",\r\n items: [extend(result, {\r\n ratio: 1\r\n })]\r\n });\r\n extend(rootBox, this._rootBoxConfig(rootBox.items));\r\n this._$root = $(\"
\").appendTo(this._itemContainer());\r\n this._createComponent(this._$root, Box, rootBox)\r\n },\r\n _rootBoxConfig: function(items) {\r\n var rootItems = each(items, function(index, item) {\r\n this._needApplyAutoBaseSize(item) && extend(item, {\r\n baseSize: \"auto\"\r\n })\r\n }.bind(this));\r\n return {\r\n width: \"100%\",\r\n height: \"100%\",\r\n items: rootItems,\r\n itemTemplate: this._getTemplateByOption(\"itemTemplate\"),\r\n itemHoldTimeout: this.option(\"itemHoldTimeout\"),\r\n onItemHold: this._createActionByOption(\"onItemHold\"),\r\n onItemClick: this._createActionByOption(\"onItemClick\"),\r\n onItemContextMenu: this._createActionByOption(\"onItemContextMenu\"),\r\n onItemRendered: this._createActionByOption(\"onItemRendered\")\r\n }\r\n },\r\n _needApplyAutoBaseSize: function(item) {\r\n return !item.baseSize && (!item.minSize || \"auto\" === item.minSize) && (!item.maxSize || \"auto\" === item.maxSize)\r\n },\r\n _prepareBoxConfig: function(config) {\r\n return extend(config || {}, {\r\n crossAlign: \"stretch\",\r\n onItemStateChanged: this.option(\"onItemStateChanged\")\r\n })\r\n },\r\n _layoutBlock: function(options) {\r\n if (this._isSingleItem(options)) {\r\n return this._itemByCell(options.row.start, options.col.start)\r\n }\r\n return this._layoutDirection(options)\r\n },\r\n _isSingleItem: function(options) {\r\n var firstCellLocation = this._grid[options.row.start][options.col.start].location;\r\n var isItemRowSpanned = options.row.end - options.row.start === firstCellLocation.rowspan - 1;\r\n var isItemColSpanned = options.col.end - options.col.start === firstCellLocation.colspan - 1;\r\n return isItemRowSpanned && isItemColSpanned\r\n },\r\n _itemByCell: function(rowIndex, colIndex) {\r\n var itemCell = this._grid[rowIndex][colIndex];\r\n return itemCell.spanningCell ? null : itemCell.item\r\n },\r\n _layoutDirection: function(options) {\r\n var items = [];\r\n var direction = options.direction;\r\n var crossDirection = this._crossDirection(direction);\r\n var block;\r\n while (block = this._nextBlock(options)) {\r\n if (this._isBlockIndivisible(options.prevBlockOptions, block)) {\r\n throw errors.Error(\"E1025\")\r\n }\r\n var item = this._layoutBlock({\r\n direction: crossDirection,\r\n row: block.row,\r\n col: block.col,\r\n prevBlockOptions: options\r\n });\r\n if (item) {\r\n extend(item, this._blockSize(block, crossDirection));\r\n items.push(item)\r\n }\r\n options[crossDirection].start = block[crossDirection].end + 1\r\n }\r\n return {\r\n box: this._prepareBoxConfig({\r\n direction: direction,\r\n items: items\r\n })\r\n }\r\n },\r\n _isBlockIndivisible: function(options, block) {\r\n return options && options.col.start === block.col.start && options.col.end === block.col.end && options.row.start === block.row.start && options.row.end === block.row.end\r\n },\r\n _crossDirection: function(direction) {\r\n return \"col\" === direction ? \"row\" : \"col\"\r\n },\r\n _nextBlock: function(options) {\r\n var direction = options.direction;\r\n var crossDirection = this._crossDirection(direction);\r\n var startIndex = options[direction].start;\r\n var endIndex = options[direction].end;\r\n var crossStartIndex = options[crossDirection].start;\r\n if (crossStartIndex > options[crossDirection].end) {\r\n return null\r\n }\r\n var crossSpan = 1;\r\n for (var crossIndex = crossStartIndex; crossIndex < crossStartIndex + crossSpan; crossIndex++) {\r\n var lineCrossSpan = 1;\r\n for (var index = startIndex; index <= endIndex; index++) {\r\n var cell = this._cellByDirection(direction, index, crossIndex);\r\n lineCrossSpan = Math.max(lineCrossSpan, cell.location[crossDirection + \"span\"])\r\n }\r\n var lineCrossEndIndex = crossIndex + lineCrossSpan;\r\n var crossEndIndex = crossStartIndex + crossSpan;\r\n if (lineCrossEndIndex > crossEndIndex) {\r\n crossSpan += lineCrossEndIndex - crossEndIndex\r\n }\r\n }\r\n var result = {};\r\n result[direction] = {\r\n start: startIndex,\r\n end: endIndex\r\n };\r\n result[crossDirection] = {\r\n start: crossStartIndex,\r\n end: crossStartIndex + crossSpan - 1\r\n };\r\n return result\r\n },\r\n _cellByDirection: function(direction, index, crossIndex) {\r\n return \"col\" === direction ? this._grid[crossIndex][index] : this._grid[index][crossIndex]\r\n },\r\n _blockSize: function(block, direction) {\r\n var defaultMinSize = \"row\" === direction ? \"auto\" : 0;\r\n var sizeConfigs = \"row\" === direction ? this._rows : this._cols;\r\n var result = extend(this._createDefaultSizeConfig(), {\r\n ratio: 0\r\n });\r\n for (var index = block[direction].start; index <= block[direction].end; index++) {\r\n var sizeConfig = sizeConfigs[index];\r\n result.ratio += sizeConfig.ratio;\r\n result.baseSize += sizeConfig.baseSize;\r\n result.minSize += sizeConfig.minSize;\r\n result.maxSize += sizeConfig.maxSize;\r\n if (isDefined(sizeConfig.shrink)) {\r\n result.shrink = sizeConfig.shrink\r\n }\r\n }\r\n result.minSize = result.minSize ? result.minSize : defaultMinSize;\r\n result.maxSize = result.maxSize ? result.maxSize : \"auto\";\r\n this._isSingleColumnScreen() && (result.baseSize = \"auto\");\r\n return result\r\n },\r\n _update: function(forceRemoveRoot) {\r\n var $existingRoot = this._$root;\r\n this._renderItems();\r\n if ($existingRoot) {\r\n if (forceRemoveRoot) {\r\n $existingRoot.remove()\r\n } else {\r\n $existingRoot.detach();\r\n this._saveAssistantRoot($existingRoot)\r\n }\r\n }\r\n this._layoutChangedAction()\r\n },\r\n _saveAssistantRoot: function($root) {\r\n this._assistantRoots = this._assistantRoots || [];\r\n this._assistantRoots.push($root)\r\n },\r\n _dispose: function() {\r\n this._clearItemNodeTemplates();\r\n this._cleanUnusedRoots();\r\n this.callBase.apply(this, arguments)\r\n },\r\n _cleanUnusedRoots: function() {\r\n if (!this._assistantRoots) {\r\n return\r\n }\r\n each(this._assistantRoots, (function(_, item) {\r\n $(item).remove()\r\n }))\r\n },\r\n _clearItemNodeTemplates: function() {\r\n each(this.option(\"items\"), (function() {\r\n delete this.node\r\n }))\r\n },\r\n _attachClickEvent: noop,\r\n _optionChanged: function(args) {\r\n switch (args.name) {\r\n case \"rows\":\r\n case \"cols\":\r\n case \"screenByWidth\":\r\n case \"singleColumnScreen\":\r\n this._clearItemNodeTemplates();\r\n this._invalidate();\r\n break;\r\n case \"width\":\r\n case \"height\":\r\n this.callBase(args);\r\n this._update();\r\n break;\r\n case \"onLayoutChanged\":\r\n this._initLayoutChangedAction();\r\n break;\r\n case \"itemTemplate\":\r\n this._clearItemNodeTemplates();\r\n this.callBase(args);\r\n break;\r\n case \"currentScreenFactor\":\r\n break;\r\n default:\r\n this.callBase(args)\r\n }\r\n },\r\n _dimensionChanged: function() {\r\n if (this._getCurrentScreen() !== this.option(\"currentScreenFactor\")) {\r\n this._update()\r\n }\r\n },\r\n repaint: function() {\r\n this._update()\r\n }\r\n});\r\nregisterComponent(\"dxResponsiveBox\", ResponsiveBox);\r\nexport default ResponsiveBox;\r\n","/**\r\n * DevExtreme (esm/ui/form/constants.js)\r\n * Version: 22.2.4\r\n * Build date: Thu Jan 19 2023\r\n *\r\n * Copyright (c) 2012 - 2023 Developer Express Inc. ALL RIGHTS RESERVED\r\n * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/\r\n */\r\nexport var WIDGET_CLASS = \"dx-widget\";\r\nexport var FORM_CLASS = \"dx-form\";\r\nexport var FORM_GROUP_CLASS = \"dx-form-group\";\r\nexport var FORM_GROUP_CAPTION_CLASS = \"dx-form-group-caption\";\r\nexport var FORM_FIELD_ITEM_COL_CLASS = \"dx-col-\";\r\nexport var FIELD_ITEM_CLASS = \"dx-field-item\";\r\nexport var LAYOUT_MANAGER_ONE_COLUMN = \"dx-layout-manager-one-col\";\r\nexport var FIELD_ITEM_LABEL_CONTENT_CLASS = \"dx-field-item-label-content\";\r\nexport var FORM_LAYOUT_MANAGER_CLASS = \"dx-layout-manager\";\r\nexport var FIELD_ITEM_LABEL_CLASS = \"dx-field-item-label\";\r\nexport var FIELD_ITEM_CONTENT_CLASS = \"dx-field-item-content\";\r\nexport var SINGLE_COLUMN_ITEM_CONTENT = \"dx-single-column-item-content\";\r\nexport var ROOT_SIMPLE_ITEM_CLASS = \"dx-root-simple-item\";\r\nexport var FORM_GROUP_CONTENT_CLASS = \"dx-form-group-content\";\r\nexport var FIELD_ITEM_CONTENT_HAS_GROUP_CLASS = \"dx-field-item-has-group\";\r\nexport var FIELD_ITEM_CONTENT_HAS_TABS_CLASS = \"dx-field-item-has-tabs\";\r\nexport var FORM_GROUP_WITH_CAPTION_CLASS = \"dx-form-group-with-caption\";\r\nexport var FIELD_ITEM_TAB_CLASS = \"dx-field-item-tab\";\r\nexport var GROUP_COL_COUNT_CLASS = \"dx-group-colcount-\";\r\nexport var GROUP_COL_COUNT_ATTR = \"group-col-count\";\r\nexport var FORM_VALIDATION_SUMMARY = \"dx-form-validation-summary\";\r\nexport var FORM_UNDERLINED_CLASS = \"dx-form-styling-mode-underlined\";\r\nexport var SIMPLE_ITEM_TYPE = \"simple\";\r\n","/**\r\n * DevExtreme (esm/ui/form/ui.form.layout_manager.utils.js)\r\n * Version: 22.2.4\r\n * Build date: Thu Jan 19 2023\r\n *\r\n * Copyright (c) 2012 - 2023 Developer Express Inc. ALL RIGHTS RESERVED\r\n * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/\r\n */\r\nimport {\r\n extend\r\n} from \"../../core/utils/extend\";\r\nimport {\r\n isDefined\r\n} from \"../../core/utils/type\";\r\nimport {\r\n each\r\n} from \"../../core/utils/iterator\";\r\nimport {\r\n captionize\r\n} from \"../../core/utils/inflector\";\r\nimport Guid from \"../../core/guid\";\r\nimport {\r\n SIMPLE_ITEM_TYPE\r\n} from \"./constants\";\r\nvar EDITORS_WITH_ARRAY_VALUE = [\"dxTagBox\", \"dxRangeSlider\"];\r\nexport var EDITORS_WITHOUT_LABELS = [\"dxCalendar\", \"dxCheckBox\", \"dxHtmlEditor\", \"dxRadioGroup\", \"dxRangeSlider\", \"dxSlider\", \"dxSwitch\"];\r\nexport function convertToRenderFieldItemOptions(_ref) {\r\n var {\r\n $parent: $parent,\r\n rootElementCssClassList: rootElementCssClassList,\r\n formOrLayoutManager: formOrLayoutManager,\r\n createComponentCallback: createComponentCallback,\r\n item: item,\r\n template: template,\r\n labelTemplate: labelTemplate,\r\n name: name,\r\n formLabelLocation: formLabelLocation,\r\n requiredMessageTemplate: requiredMessageTemplate,\r\n validationGroup: validationGroup,\r\n editorValue: editorValue,\r\n canAssignUndefinedValueToEditor: canAssignUndefinedValueToEditor,\r\n editorValidationBoundary: editorValidationBoundary,\r\n editorStylingMode: editorStylingMode,\r\n showColonAfterLabel: showColonAfterLabel,\r\n managerLabelLocation: managerLabelLocation,\r\n itemId: itemId,\r\n managerMarkOptions: managerMarkOptions,\r\n labelMode: labelMode,\r\n onLabelTemplateRendered: onLabelTemplateRendered\r\n } = _ref;\r\n var isRequired = isDefined(item.isRequired) ? item.isRequired : !!_hasRequiredRuleInSet(item.validationRules);\r\n var isSimpleItem = item.itemType === SIMPLE_ITEM_TYPE;\r\n var helpID = item.helpText ? \"dx-\" + new Guid : null;\r\n var labelOptions = _convertToLabelOptions({\r\n item: item,\r\n id: itemId,\r\n isRequired: isRequired,\r\n managerMarkOptions: managerMarkOptions,\r\n showColonAfterLabel: showColonAfterLabel,\r\n labelLocation: managerLabelLocation,\r\n formLabelMode: labelMode,\r\n labelTemplate: labelTemplate,\r\n onLabelTemplateRendered: onLabelTemplateRendered\r\n });\r\n var needRenderLabel = labelOptions.visible && (labelOptions.text || labelOptions.labelTemplate && isSimpleItem);\r\n var {\r\n location: labelLocation,\r\n labelID: labelID\r\n } = labelOptions;\r\n var labelNeedBaselineAlign = \"top\" !== labelLocation && [\"dxTextArea\", \"dxRadioGroup\", \"dxCalendar\", \"dxHtmlEditor\"].includes(item.editorType);\r\n var editorOptions = _convertToEditorOptions({\r\n editorType: item.editorType,\r\n editorValue: editorValue,\r\n defaultEditorName: item.dataField,\r\n canAssignUndefinedValueToEditor: canAssignUndefinedValueToEditor,\r\n externalEditorOptions: item.editorOptions,\r\n editorInputId: itemId,\r\n editorValidationBoundary: editorValidationBoundary,\r\n editorStylingMode: editorStylingMode,\r\n formLabelMode: labelMode,\r\n labelText: labelOptions.textWithoutColon,\r\n labelMark: labelOptions.markOptions.showRequiredMark ? String.fromCharCode(160) + labelOptions.markOptions.requiredMark : \"\"\r\n });\r\n var needRenderOptionalMarkAsHelpText = labelOptions.markOptions.showOptionalMark && !labelOptions.visible && \"hidden\" !== editorOptions.labelMode && !isDefined(item.helpText);\r\n var helpText = needRenderOptionalMarkAsHelpText ? labelOptions.markOptions.optionalMark : item.helpText;\r\n return {\r\n $parent: $parent,\r\n rootElementCssClassList: rootElementCssClassList,\r\n formOrLayoutManager: formOrLayoutManager,\r\n createComponentCallback: createComponentCallback,\r\n labelOptions: labelOptions,\r\n labelNeedBaselineAlign: labelNeedBaselineAlign,\r\n labelLocation: labelLocation,\r\n needRenderLabel: needRenderLabel,\r\n item: item,\r\n isSimpleItem: isSimpleItem,\r\n isRequired: isRequired,\r\n template: template,\r\n helpID: helpID,\r\n labelID: labelID,\r\n name: name,\r\n helpText: helpText,\r\n formLabelLocation: formLabelLocation,\r\n requiredMessageTemplate: requiredMessageTemplate,\r\n validationGroup: validationGroup,\r\n editorOptions: editorOptions\r\n }\r\n}\r\nexport function getLabelMarkText(_ref2) {\r\n var {\r\n showRequiredMark: showRequiredMark,\r\n requiredMark: requiredMark,\r\n showOptionalMark: showOptionalMark,\r\n optionalMark: optionalMark\r\n } = _ref2;\r\n if (!showRequiredMark && !showOptionalMark) {\r\n return \"\"\r\n }\r\n return String.fromCharCode(160) + (showRequiredMark ? requiredMark : optionalMark)\r\n}\r\nexport function convertToLabelMarkOptions(_ref3, isRequired) {\r\n var {\r\n showRequiredMark: showRequiredMark,\r\n requiredMark: requiredMark,\r\n showOptionalMark: showOptionalMark,\r\n optionalMark: optionalMark\r\n } = _ref3;\r\n return {\r\n showRequiredMark: showRequiredMark && isRequired,\r\n requiredMark: requiredMark,\r\n showOptionalMark: showOptionalMark && !isRequired,\r\n optionalMark: optionalMark\r\n }\r\n}\r\n\r\nfunction _convertToEditorOptions(_ref4) {\r\n var {\r\n editorType: editorType,\r\n defaultEditorName: defaultEditorName,\r\n editorValue: editorValue,\r\n canAssignUndefinedValueToEditor: canAssignUndefinedValueToEditor,\r\n externalEditorOptions: externalEditorOptions,\r\n editorInputId: editorInputId,\r\n editorValidationBoundary: editorValidationBoundary,\r\n editorStylingMode: editorStylingMode,\r\n formLabelMode: formLabelMode,\r\n labelText: labelText,\r\n labelMark: labelMark\r\n } = _ref4;\r\n var editorOptionsWithValue = {};\r\n if (void 0 !== editorValue || canAssignUndefinedValueToEditor) {\r\n editorOptionsWithValue.value = editorValue\r\n }\r\n if (-1 !== EDITORS_WITH_ARRAY_VALUE.indexOf(editorType)) {\r\n editorOptionsWithValue.value = editorOptionsWithValue.value || []\r\n }\r\n var labelMode = null === externalEditorOptions || void 0 === externalEditorOptions ? void 0 : externalEditorOptions.labelMode;\r\n if (!isDefined(labelMode)) {\r\n labelMode = \"outside\" === formLabelMode ? \"hidden\" : formLabelMode\r\n }\r\n var stylingMode = (null === externalEditorOptions || void 0 === externalEditorOptions ? void 0 : externalEditorOptions.stylingMode) || editorStylingMode;\r\n var result = extend(true, editorOptionsWithValue, externalEditorOptions, {\r\n inputAttr: {\r\n id: editorInputId\r\n },\r\n validationBoundary: editorValidationBoundary,\r\n stylingMode: stylingMode,\r\n label: labelText,\r\n labelMode: labelMode,\r\n labelMark: labelMark\r\n });\r\n if (externalEditorOptions) {\r\n if (result.dataSource) {\r\n result.dataSource = externalEditorOptions.dataSource\r\n }\r\n if (result.items) {\r\n result.items = externalEditorOptions.items\r\n }\r\n }\r\n if (defaultEditorName && !result.name) {\r\n result.name = defaultEditorName\r\n }\r\n return result\r\n}\r\n\r\nfunction _hasRequiredRuleInSet(rules) {\r\n var hasRequiredRule;\r\n if (rules && rules.length) {\r\n each(rules, (function(index, rule) {\r\n if (\"required\" === rule.type) {\r\n hasRequiredRule = true;\r\n return false\r\n }\r\n }))\r\n }\r\n return hasRequiredRule\r\n}\r\n\r\nfunction _convertToLabelOptions(_ref5) {\r\n var {\r\n item: item,\r\n id: id,\r\n isRequired: isRequired,\r\n managerMarkOptions: managerMarkOptions,\r\n showColonAfterLabel: showColonAfterLabel,\r\n labelLocation: labelLocation,\r\n labelTemplate: labelTemplate,\r\n formLabelMode: formLabelMode,\r\n onLabelTemplateRendered: onLabelTemplateRendered\r\n } = _ref5;\r\n var isEditorWithoutLabels = EDITORS_WITHOUT_LABELS.includes(item.editorType);\r\n var labelOptions = extend({\r\n showColon: showColonAfterLabel,\r\n location: labelLocation,\r\n id: id,\r\n visible: \"outside\" === formLabelMode || isEditorWithoutLabels && \"hidden\" !== formLabelMode,\r\n isRequired: isRequired\r\n }, item ? item.label : {}, {\r\n markOptions: convertToLabelMarkOptions(managerMarkOptions, isRequired),\r\n labelTemplate: labelTemplate,\r\n onLabelTemplateRendered: onLabelTemplateRendered\r\n });\r\n if ([\"dxRadioGroup\", \"dxCheckBox\", \"dxLookup\", \"dxSlider\", \"dxRangeSlider\", \"dxSwitch\", \"dxHtmlEditor\"].includes(item.editorType)) {\r\n labelOptions.labelID = \"dx-label-\".concat(new Guid)\r\n }\r\n if (!labelOptions.text && item.dataField) {\r\n labelOptions.text = captionize(item.dataField)\r\n }\r\n if (labelOptions.text) {\r\n labelOptions.textWithoutColon = labelOptions.text;\r\n labelOptions.text += labelOptions.showColon ? \":\" : \"\"\r\n }\r\n return labelOptions\r\n}\r\n","/**\r\n * DevExtreme (esm/ui/form/components/label.js)\r\n * Version: 22.2.4\r\n * Build date: Thu Jan 19 2023\r\n *\r\n * Copyright (c) 2012 - 2023 Developer Express Inc. ALL RIGHTS RESERVED\r\n * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/\r\n */\r\nimport $ from \"../../../core/renderer\";\r\nimport {\r\n isDefined\r\n} from \"../../../core/utils/type\";\r\nimport {\r\n getPublicElement\r\n} from \"../../../core/element\";\r\nimport {\r\n getLabelMarkText\r\n} from \"../ui.form.layout_manager.utils\";\r\nimport {\r\n FIELD_ITEM_LABEL_CONTENT_CLASS,\r\n FIELD_ITEM_LABEL_CLASS\r\n} from \"../constants\";\r\nexport var GET_LABEL_WIDTH_BY_TEXT_CLASS = \"dx-layout-manager-hidden-label\";\r\nexport var FIELD_ITEM_REQUIRED_MARK_CLASS = \"dx-field-item-required-mark\";\r\nexport var FIELD_ITEM_LABEL_LOCATION_CLASS = \"dx-field-item-label-location-\";\r\nexport var FIELD_ITEM_OPTIONAL_MARK_CLASS = \"dx-field-item-optional-mark\";\r\nexport var FIELD_ITEM_LABEL_TEXT_CLASS = \"dx-field-item-label-text\";\r\nexport function renderLabel(_ref) {\r\n var {\r\n text: text,\r\n id: id,\r\n location: location,\r\n alignment: alignment,\r\n labelID: labelID = null,\r\n markOptions: markOptions = {},\r\n labelTemplate: labelTemplate,\r\n labelTemplateData: labelTemplateData,\r\n onLabelTemplateRendered: onLabelTemplateRendered\r\n } = _ref;\r\n if ((!isDefined(text) || text.length <= 0) && !isDefined(labelTemplate)) {\r\n return null\r\n }\r\n var $label = $(\"