\").addClass(FIELD_EMPTY_ITEM_CLASS).html(\" \").addClass(rootElementCssClassList.join(\" \")).appendTo($parent)\r\n}\r\n","/**\r\n * DevExtreme (esm/ui/form/ui.form.layout_manager.js)\r\n * Version: 22.1.6\r\n * Build date: Tue Oct 18 2022\r\n *\r\n * Copyright (c) 2012 - 2022 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 eventsEngine from \"../../events/core/events_engine\";\r\nimport {\r\n default as FormItemsRunTimeInfo\r\n} from \"./ui.form.items_runtime_info\";\r\nimport registerComponent from \"../../core/component_registrator\";\r\nimport {\r\n isDefined,\r\n isEmptyObject,\r\n isFunction,\r\n isObject,\r\n type\r\n} from \"../../core/utils/type\";\r\nimport variableWrapper from \"../../core/utils/variable_wrapper\";\r\nimport {\r\n getCurrentScreenFactor,\r\n hasWindow\r\n} from \"../../core/utils/window\";\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 normalizeIndexes\r\n} from \"../../core/utils/array\";\r\nimport {\r\n compileGetter\r\n} from \"../../core/utils/data\";\r\nimport {\r\n removeEvent\r\n} from \"../../events/remove\";\r\nimport messageLocalization from \"../../localization/message\";\r\nimport {\r\n styleProp\r\n} from \"../../core/utils/style\";\r\nimport Widget from \"../widget/ui.widget\";\r\nimport ResponsiveBox from \"../responsive_box\";\r\nimport {\r\n LAYOUT_MANAGER_ONE_COLUMN,\r\n FORM_LAYOUT_MANAGER_CLASS,\r\n SINGLE_COLUMN_ITEM_CONTENT,\r\n ROOT_SIMPLE_ITEM_CLASS,\r\n SIMPLE_ITEM_TYPE,\r\n FIELD_ITEM_CLASS\r\n} from \"./constants\";\r\nimport \"../text_box\";\r\nimport \"../number_box\";\r\nimport \"../check_box\";\r\nimport \"../date_box\";\r\nimport \"../button\";\r\nimport {\r\n renderFieldItem\r\n} from \"./components/field_item\";\r\nimport {\r\n renderButtonItem\r\n} from \"./components/button_item\";\r\nimport {\r\n renderEmptyItem\r\n} from \"./components/empty_item\";\r\nimport {\r\n convertToRenderFieldItemOptions\r\n} from \"./ui.form.layout_manager.utils\";\r\nvar FORM_EDITOR_BY_DEFAULT = \"dxTextBox\";\r\nvar LAYOUT_MANAGER_FIRST_ROW_CLASS = \"dx-first-row\";\r\nvar LAYOUT_MANAGER_LAST_ROW_CLASS = \"dx-last-row\";\r\nvar LAYOUT_MANAGER_FIRST_COL_CLASS = \"dx-first-col\";\r\nvar LAYOUT_MANAGER_LAST_COL_CLASS = \"dx-last-col\";\r\nvar LAYOUT_STRATEGY_FLEX = \"flex\";\r\nvar LAYOUT_STRATEGY_FALLBACK = \"fallback\";\r\nvar LayoutManager = Widget.inherit({\r\n _getDefaultOptions: function() {\r\n return extend(this.callBase(), {\r\n layoutData: {},\r\n readOnly: false,\r\n colCount: 1,\r\n colCountByScreen: void 0,\r\n labelLocation: \"left\",\r\n onFieldDataChanged: null,\r\n onEditorEnterKey: null,\r\n customizeItem: null,\r\n alignItemLabels: true,\r\n minColWidth: 200,\r\n showRequiredMark: true,\r\n screenByWidth: null,\r\n showOptionalMark: false,\r\n requiredMark: \"*\",\r\n labelMode: \"outside\",\r\n optionalMark: messageLocalization.format(\"dxForm-optionalMark\"),\r\n requiredMessage: messageLocalization.getFormatter(\"dxForm-requiredMessage\")\r\n })\r\n },\r\n _setOptionsByReference: function() {\r\n this.callBase();\r\n extend(this._optionsByReference, {\r\n layoutData: true,\r\n validationGroup: true\r\n })\r\n },\r\n _init: function() {\r\n var layoutData = this.option(\"layoutData\");\r\n this.callBase();\r\n this._itemWatchers = [];\r\n this._itemsRunTimeInfo = new FormItemsRunTimeInfo;\r\n this._updateReferencedOptions(layoutData);\r\n this._initDataAndItems(layoutData)\r\n },\r\n _dispose: function() {\r\n this.callBase();\r\n this._cleanItemWatchers()\r\n },\r\n _initDataAndItems: function(initialData) {\r\n this._syncDataWithItems();\r\n this._updateItems(initialData)\r\n },\r\n _syncDataWithItems: function() {\r\n var layoutData = this.option(\"layoutData\");\r\n var userItems = this.option(\"items\");\r\n if (isDefined(userItems)) {\r\n userItems.forEach(item => {\r\n if (item.dataField && void 0 === this._getDataByField(item.dataField)) {\r\n var value;\r\n if (item.editorOptions) {\r\n value = item.editorOptions.value\r\n }\r\n if (isDefined(value) || item.dataField in layoutData) {\r\n this._updateFieldValue(item.dataField, value)\r\n }\r\n }\r\n })\r\n }\r\n },\r\n _getDataByField: function(dataField) {\r\n return dataField ? this.option(\"layoutData.\" + dataField) : null\r\n },\r\n _isCheckboxUndefinedStateEnabled: function(_ref) {\r\n var {\r\n allowIndeterminateState: allowIndeterminateState,\r\n editorType: editorType,\r\n dataField: dataField\r\n } = _ref;\r\n if (true === allowIndeterminateState && \"dxCheckBox\" === editorType) {\r\n var nameParts = [\"layoutData\", ...dataField.split(\".\")];\r\n var propertyName = nameParts.pop();\r\n var layoutData = this.option(nameParts.join(\".\"));\r\n return layoutData && propertyName in layoutData\r\n }\r\n return false\r\n },\r\n _updateFieldValue: function(dataField, value) {\r\n var layoutData = this.option(\"layoutData\");\r\n var newValue = value;\r\n if (!variableWrapper.isWrapped(layoutData[dataField]) && isDefined(dataField)) {\r\n this.option(\"layoutData.\" + dataField, newValue)\r\n } else if (variableWrapper.isWritableWrapped(layoutData[dataField])) {\r\n newValue = isFunction(newValue) ? newValue() : newValue;\r\n layoutData[dataField](newValue)\r\n }\r\n this._triggerOnFieldDataChanged({\r\n dataField: dataField,\r\n value: newValue\r\n })\r\n },\r\n _triggerOnFieldDataChanged: function(args) {\r\n this._createActionByOption(\"onFieldDataChanged\")(args)\r\n },\r\n _updateItems: function(layoutData) {\r\n var that = this;\r\n var userItems = this.option(\"items\");\r\n var isUserItemsExist = isDefined(userItems);\r\n var customizeItem = that.option(\"customizeItem\");\r\n var items = isUserItemsExist ? userItems : this._generateItemsByData(layoutData);\r\n if (isDefined(items)) {\r\n var processedItems = [];\r\n each(items, (function(index, item) {\r\n if (that._isAcceptableItem(item)) {\r\n item = that._processItem(item);\r\n customizeItem && customizeItem(item);\r\n if (isObject(item) && false !== variableWrapper.unwrap(item.visible)) {\r\n processedItems.push(item)\r\n }\r\n }\r\n }));\r\n if (!that._itemWatchers.length || !isUserItemsExist) {\r\n that._updateItemWatchers(items)\r\n }\r\n this._setItems(processedItems);\r\n this._sortItems()\r\n }\r\n },\r\n _cleanItemWatchers: function() {\r\n this._itemWatchers.forEach((function(dispose) {\r\n dispose()\r\n }));\r\n this._itemWatchers = []\r\n },\r\n _updateItemWatchers: function(items) {\r\n var that = this;\r\n var watch = that._getWatch();\r\n items.forEach((function(item) {\r\n if (isObject(item) && isDefined(item.visible) && isFunction(watch)) {\r\n that._itemWatchers.push(watch((function() {\r\n return variableWrapper.unwrap(item.visible)\r\n }), (function() {\r\n that._updateItems(that.option(\"layoutData\"));\r\n that.repaint()\r\n }), {\r\n skipImmediate: true\r\n }))\r\n }\r\n }))\r\n },\r\n _generateItemsByData: function(layoutData) {\r\n var result = [];\r\n if (isDefined(layoutData)) {\r\n each(layoutData, (function(dataField) {\r\n result.push({\r\n dataField: dataField\r\n })\r\n }))\r\n }\r\n return result\r\n },\r\n _isAcceptableItem: function(item) {\r\n var itemField = item.dataField || item;\r\n var itemData = this._getDataByField(itemField);\r\n return !(isFunction(itemData) && !variableWrapper.isWrapped(itemData))\r\n },\r\n _processItem: function(item) {\r\n if (\"string\" === typeof item) {\r\n item = {\r\n dataField: item\r\n }\r\n }\r\n if (\"object\" === typeof item && !item.itemType) {\r\n item.itemType = SIMPLE_ITEM_TYPE\r\n }\r\n if (!isDefined(item.editorType) && isDefined(item.dataField)) {\r\n var value = this._getDataByField(item.dataField);\r\n item.editorType = isDefined(value) ? this._getEditorTypeByDataType(type(value)) : FORM_EDITOR_BY_DEFAULT\r\n }\r\n if (\"dxCheckBox\" === item.editorType) {\r\n var _item$allowIndetermin;\r\n item.allowIndeterminateState = null !== (_item$allowIndetermin = item.allowIndeterminateState) && void 0 !== _item$allowIndetermin ? _item$allowIndetermin : true\r\n }\r\n return item\r\n },\r\n _getEditorTypeByDataType: function(dataType) {\r\n switch (dataType) {\r\n case \"number\":\r\n return \"dxNumberBox\";\r\n case \"date\":\r\n return \"dxDateBox\";\r\n case \"boolean\":\r\n return \"dxCheckBox\";\r\n default:\r\n return \"dxTextBox\"\r\n }\r\n },\r\n _sortItems: function() {\r\n normalizeIndexes(this._items, \"visibleIndex\");\r\n this._sortIndexes()\r\n },\r\n _sortIndexes: function() {\r\n this._items.sort((function(itemA, itemB) {\r\n var indexA = itemA.visibleIndex;\r\n var indexB = itemB.visibleIndex;\r\n var result;\r\n if (indexA > indexB) {\r\n result = 1\r\n } else if (indexA < indexB) {\r\n result = -1\r\n } else {\r\n result = 0\r\n }\r\n return result\r\n }))\r\n },\r\n _initMarkup: function() {\r\n this._itemsRunTimeInfo.clear();\r\n this.$element().addClass(FORM_LAYOUT_MANAGER_CLASS);\r\n this.callBase();\r\n this._renderResponsiveBox()\r\n },\r\n _hasBrowserFlex: function() {\r\n return styleProp(LAYOUT_STRATEGY_FLEX) === LAYOUT_STRATEGY_FLEX\r\n },\r\n _renderResponsiveBox: function() {\r\n var templatesInfo = [];\r\n if (this._items && this._items.length) {\r\n var colCount = this._getColCount();\r\n var $container = $(\"
\").appendTo(this.$element());\r\n this._prepareItemsWithMerging(colCount);\r\n var layoutItems = this._generateLayoutItems();\r\n this._responsiveBox = this._createComponent($container, ResponsiveBox, this._getResponsiveBoxConfig(layoutItems, colCount, templatesInfo));\r\n if (!hasWindow()) {\r\n this._renderTemplates(templatesInfo)\r\n }\r\n }\r\n },\r\n _itemStateChangedHandler: function(e) {\r\n this._refresh()\r\n },\r\n _renderTemplates: function(templatesInfo) {\r\n var that = this;\r\n each(templatesInfo, (function(_, info) {\r\n switch (info.itemType) {\r\n case \"empty\":\r\n renderEmptyItem(info);\r\n break;\r\n case \"button\":\r\n that._renderButtonItem(info);\r\n break;\r\n default:\r\n that._renderFieldItem(info)\r\n }\r\n }))\r\n },\r\n _getResponsiveBoxConfig: function(layoutItems, colCount, templatesInfo) {\r\n var that = this;\r\n var colCountByScreen = that.option(\"colCountByScreen\");\r\n var xsColCount = colCountByScreen && colCountByScreen.xs;\r\n return {\r\n onItemStateChanged: this._itemStateChangedHandler.bind(this),\r\n _layoutStrategy: that._hasBrowserFlex() ? LAYOUT_STRATEGY_FLEX : LAYOUT_STRATEGY_FALLBACK,\r\n onLayoutChanged: function() {\r\n var onLayoutChanged = that.option(\"onLayoutChanged\");\r\n var isSingleColumnMode = that.isSingleColumnMode();\r\n if (onLayoutChanged) {\r\n that.$element().toggleClass(LAYOUT_MANAGER_ONE_COLUMN, isSingleColumnMode);\r\n onLayoutChanged(isSingleColumnMode)\r\n }\r\n },\r\n onContentReady: function(e) {\r\n if (hasWindow()) {\r\n that._renderTemplates(templatesInfo)\r\n }\r\n if (that.option(\"onLayoutChanged\")) {\r\n that.$element().toggleClass(LAYOUT_MANAGER_ONE_COLUMN, that.isSingleColumnMode(e.component))\r\n }\r\n },\r\n itemTemplate: function(e, itemData, itemElement) {\r\n if (!e.location) {\r\n return\r\n }\r\n var $itemElement = $(itemElement);\r\n var itemRenderedCountInPreviousRows = e.location.row * colCount;\r\n var item = that._items[e.location.col + itemRenderedCountInPreviousRows];\r\n if (!item) {\r\n return\r\n }\r\n var itemCssClassList = [item.cssClass];\r\n $itemElement.toggleClass(SINGLE_COLUMN_ITEM_CONTENT, that.isSingleColumnMode(this));\r\n if (0 === e.location.row) {\r\n itemCssClassList.push(LAYOUT_MANAGER_FIRST_ROW_CLASS)\r\n }\r\n if (0 === e.location.col) {\r\n itemCssClassList.push(LAYOUT_MANAGER_FIRST_COL_CLASS)\r\n }\r\n if (item.itemType === SIMPLE_ITEM_TYPE && that.option(\"isRoot\")) {\r\n $itemElement.addClass(ROOT_SIMPLE_ITEM_CLASS)\r\n }\r\n var isLastColumn = e.location.col === colCount - 1 || e.location.col + e.location.colspan === colCount;\r\n var rowsCount = that._getRowsCount();\r\n var isLastRow = e.location.row === rowsCount - 1;\r\n if (isLastColumn) {\r\n itemCssClassList.push(LAYOUT_MANAGER_LAST_COL_CLASS)\r\n }\r\n if (isLastRow) {\r\n itemCssClassList.push(LAYOUT_MANAGER_LAST_ROW_CLASS)\r\n }\r\n if (\"empty\" !== item.itemType) {\r\n itemCssClassList.push(FIELD_ITEM_CLASS);\r\n itemCssClassList.push(that.option(\"cssItemClass\"));\r\n if (isDefined(item.col)) {\r\n itemCssClassList.push(\"dx-col-\" + item.col)\r\n }\r\n }\r\n templatesInfo.push({\r\n itemType: item.itemType,\r\n item: item,\r\n $parent: $itemElement,\r\n rootElementCssClassList: itemCssClassList\r\n })\r\n },\r\n cols: that._generateRatio(colCount),\r\n rows: that._generateRatio(that._getRowsCount(), true),\r\n dataSource: layoutItems,\r\n screenByWidth: that.option(\"screenByWidth\"),\r\n singleColumnScreen: xsColCount ? false : \"xs\"\r\n }\r\n },\r\n _getColCount: function() {\r\n var colCount = this.option(\"colCount\");\r\n var colCountByScreen = this.option(\"colCountByScreen\");\r\n if (colCountByScreen) {\r\n var screenFactor = this.option(\"form\").getTargetScreenFactor();\r\n if (!screenFactor) {\r\n screenFactor = hasWindow() ? getCurrentScreenFactor(this.option(\"screenByWidth\")) : \"lg\"\r\n }\r\n colCount = colCountByScreen[screenFactor] || colCount\r\n }\r\n if (\"auto\" === colCount) {\r\n if (this._cashedColCount) {\r\n return this._cashedColCount\r\n }\r\n this._cashedColCount = colCount = this._getMaxColCount()\r\n }\r\n return colCount < 1 ? 1 : colCount\r\n },\r\n _getMaxColCount: function() {\r\n if (!hasWindow()) {\r\n return 1\r\n }\r\n var minColWidth = this.option(\"minColWidth\");\r\n var width = getWidth(this.$element());\r\n var itemsCount = this._items.length;\r\n var maxColCount = Math.floor(width / minColWidth) || 1;\r\n return itemsCount < maxColCount ? itemsCount : maxColCount\r\n },\r\n isCachedColCountObsolete: function() {\r\n return this._cashedColCount && this._getMaxColCount() !== this._cashedColCount\r\n },\r\n _prepareItemsWithMerging: function(colCount) {\r\n var items = this._items.slice(0);\r\n var item;\r\n var itemsMergedByCol;\r\n var result = [];\r\n var j;\r\n var i;\r\n for (i = 0; i < items.length; i++) {\r\n item = items[i];\r\n result.push(item);\r\n if (this.option(\"alignItemLabels\") || item.alignItemLabels || item.colSpan) {\r\n item.col = this._getColByIndex(result.length - 1, colCount)\r\n }\r\n if (item.colSpan > 1 && item.col + item.colSpan <= colCount) {\r\n itemsMergedByCol = [];\r\n for (j = 0; j < item.colSpan - 1; j++) {\r\n itemsMergedByCol.push({\r\n merged: true\r\n })\r\n }\r\n result = result.concat(itemsMergedByCol)\r\n } else {\r\n delete item.colSpan\r\n }\r\n }\r\n this._setItems(result)\r\n },\r\n _getColByIndex: function(index, colCount) {\r\n return index % colCount\r\n },\r\n _setItems: function(items) {\r\n this._items = items;\r\n this._cashedColCount = null\r\n },\r\n _generateLayoutItems: function() {\r\n var items = this._items;\r\n var colCount = this._getColCount();\r\n var result = [];\r\n var item;\r\n var i;\r\n for (i = 0; i < items.length; i++) {\r\n item = items[i];\r\n if (!item.merged) {\r\n var generatedItem = {\r\n location: {\r\n row: parseInt(i / colCount),\r\n col: this._getColByIndex(i, colCount)\r\n }\r\n };\r\n if (isDefined(item.disabled)) {\r\n generatedItem.disabled = item.disabled\r\n }\r\n if (isDefined(item.visible)) {\r\n generatedItem.visible = item.visible\r\n }\r\n if (isDefined(item.colSpan)) {\r\n generatedItem.location.colspan = item.colSpan\r\n }\r\n if (isDefined(item.rowSpan)) {\r\n generatedItem.location.rowspan = item.rowSpan\r\n }\r\n result.push(generatedItem)\r\n }\r\n }\r\n return result\r\n },\r\n _renderEmptyItem: function($container) {\r\n renderEmptyItem({\r\n $container: $container\r\n })\r\n },\r\n _renderButtonItem: function(_ref2) {\r\n var {\r\n item: item,\r\n $parent: $parent,\r\n rootElementCssClassList: rootElementCssClassList\r\n } = _ref2;\r\n var {\r\n $rootElement: $rootElement,\r\n buttonInstance: buttonInstance\r\n } = renderButtonItem({\r\n item: item,\r\n $parent: $parent,\r\n rootElementCssClassList: rootElementCssClassList,\r\n validationGroup: this.option(\"validationGroup\"),\r\n createComponentCallback: this._createComponent.bind(this)\r\n });\r\n this._itemsRunTimeInfo.add({\r\n item: item,\r\n widgetInstance: buttonInstance,\r\n guid: item.guid,\r\n $itemContainer: $rootElement\r\n })\r\n },\r\n _renderFieldItem: function(_ref3) {\r\n var _this$option;\r\n var {\r\n item: item,\r\n $parent: $parent,\r\n rootElementCssClassList: rootElementCssClassList\r\n } = _ref3;\r\n var editorValue = this._getDataByField(item.dataField);\r\n var canAssignUndefinedValueToEditor = false;\r\n if (void 0 === editorValue) {\r\n var {\r\n allowIndeterminateState: allowIndeterminateState,\r\n editorType: editorType,\r\n dataField: dataField\r\n } = item;\r\n canAssignUndefinedValueToEditor = this._isCheckboxUndefinedStateEnabled({\r\n allowIndeterminateState: allowIndeterminateState,\r\n editorType: editorType,\r\n dataField: dataField\r\n })\r\n }\r\n var name = item.dataField || item.name;\r\n var {\r\n $fieldEditorContainer: $fieldEditorContainer,\r\n widgetInstance: widgetInstance,\r\n $rootElement: $rootElement\r\n } = renderFieldItem(convertToRenderFieldItemOptions({\r\n $parent: $parent,\r\n rootElementCssClassList: rootElementCssClassList,\r\n item: item,\r\n name: name,\r\n editorValue: editorValue,\r\n canAssignUndefinedValueToEditor: canAssignUndefinedValueToEditor,\r\n formOrLayoutManager: this._getFormOrThis(),\r\n createComponentCallback: this._createComponent.bind(this),\r\n useFlexLayout: this._hasBrowserFlex(),\r\n formLabelLocation: this.option(\"labelLocation\"),\r\n requiredMessageTemplate: this.option(\"requiredMessage\"),\r\n validationGroup: this.option(\"validationGroup\"),\r\n editorValidationBoundary: this.option(\"validationBoundary\"),\r\n editorStylingMode: this.option(\"form\") && this.option(\"form\").option(\"stylingMode\"),\r\n showColonAfterLabel: this.option(\"showColonAfterLabel\"),\r\n managerLabelLocation: this.option(\"labelLocation\"),\r\n template: item.template ? this._getTemplate(item.template) : null,\r\n itemId: this.option(\"form\") && this.option(\"form\").getItemID(name),\r\n managerMarkOptions: this._getMarkOptions(),\r\n labelMode: this.option(\"labelMode\")\r\n }));\r\n null === (_this$option = this.option(\"onFieldItemRendered\")) || void 0 === _this$option ? void 0 : _this$option();\r\n if (widgetInstance && item.dataField) {\r\n this._bindDataField(widgetInstance, item.dataField, item.editorType, $fieldEditorContainer)\r\n }\r\n this._itemsRunTimeInfo.add({\r\n item: item,\r\n widgetInstance: widgetInstance,\r\n guid: item.guid,\r\n $itemContainer: $rootElement\r\n })\r\n },\r\n _getMarkOptions: function() {\r\n return {\r\n showRequiredMark: this.option(\"showRequiredMark\"),\r\n requiredMark: this.option(\"requiredMark\"),\r\n showOptionalMark: this.option(\"showOptionalMark\"),\r\n optionalMark: this.option(\"optionalMark\")\r\n }\r\n },\r\n _getFormOrThis: function() {\r\n return this.option(\"form\") || this\r\n },\r\n _bindDataField: function(editorInstance, dataField, editorType, $container) {\r\n var formOrThis = this._getFormOrThis();\r\n editorInstance.on(\"enterKey\", (function(args) {\r\n formOrThis._createActionByOption(\"onEditorEnterKey\")(extend(args, {\r\n dataField: dataField\r\n }))\r\n }));\r\n this._createWatcher(editorInstance, $container, dataField);\r\n this.linkEditorToDataField(editorInstance, dataField, editorType)\r\n },\r\n _createWatcher: function(editorInstance, $container, dataField) {\r\n var that = this;\r\n var watch = that._getWatch();\r\n if (!isFunction(watch)) {\r\n return\r\n }\r\n var dispose = watch((function() {\r\n return that._getDataByField(dataField)\r\n }), (function() {\r\n var fieldValue = that._getDataByField(dataField);\r\n if (\"dxTagBox\" === editorInstance.NAME) {\r\n var editorValue = editorInstance.option(\"value\");\r\n if (fieldValue !== editorValue && function(array1, array2) {\r\n if (!Array.isArray(array1) || !Array.isArray(array2) || array1.length !== array2.length) {\r\n return false\r\n }\r\n for (var i = 0; i < array1.length; i++) {\r\n if (array1[i] !== array2[i]) {\r\n return false\r\n }\r\n }\r\n return true\r\n }(fieldValue, editorValue)) {\r\n return\r\n }\r\n }\r\n editorInstance.option(\"value\", fieldValue)\r\n }), {\r\n deep: true,\r\n skipImmediate: true\r\n });\r\n eventsEngine.on($container, removeEvent, dispose)\r\n },\r\n _getWatch: function() {\r\n if (!isDefined(this._watch)) {\r\n var formInstance = this.option(\"form\");\r\n this._watch = formInstance && formInstance.option(\"integrationOptions.watchMethod\")\r\n }\r\n return this._watch\r\n },\r\n _createComponent: function($editor, type, editorOptions) {\r\n var readOnlyState = this.option(\"readOnly\");\r\n var instance = this.callBase($editor, type, editorOptions);\r\n readOnlyState && instance.option(\"readOnly\", readOnlyState);\r\n this.on(\"optionChanged\", (function(args) {\r\n if (\"readOnly\" === args.name && !isDefined(editorOptions.readOnly)) {\r\n instance.option(args.name, args.value)\r\n }\r\n }));\r\n return instance\r\n },\r\n _generateRatio: function(count, isAutoSize) {\r\n var result = [];\r\n var ratio;\r\n var i;\r\n for (i = 0; i < count; i++) {\r\n ratio = {\r\n ratio: 1\r\n };\r\n if (isAutoSize) {\r\n ratio.baseSize = \"auto\"\r\n }\r\n result.push(ratio)\r\n }\r\n return result\r\n },\r\n _getRowsCount: function() {\r\n return Math.ceil(this._items.length / this._getColCount())\r\n },\r\n _updateReferencedOptions: function(newLayoutData) {\r\n var layoutData = this.option(\"layoutData\");\r\n if (isObject(layoutData)) {\r\n Object.getOwnPropertyNames(layoutData).forEach(property => delete this._optionsByReference[\"layoutData.\" + property])\r\n }\r\n if (isObject(newLayoutData)) {\r\n Object.getOwnPropertyNames(newLayoutData).forEach(property => this._optionsByReference[\"layoutData.\" + property] = true)\r\n }\r\n },\r\n _resetWidget(instance) {\r\n this._disableEditorValueChangedHandler = true;\r\n instance.reset();\r\n this._disableEditorValueChangedHandler = false;\r\n instance.option(\"isValid\", true)\r\n },\r\n _optionChanged(args) {\r\n if (0 === args.fullName.search(\"layoutData.\")) {\r\n return\r\n }\r\n switch (args.name) {\r\n case \"showRequiredMark\":\r\n case \"showOptionalMark\":\r\n case \"requiredMark\":\r\n case \"optionalMark\":\r\n this._cashedRequiredConfig = null;\r\n this._invalidate();\r\n break;\r\n case \"layoutData\":\r\n this._updateReferencedOptions(args.value);\r\n if (this.option(\"items\")) {\r\n if (!isEmptyObject(args.value)) {\r\n this._itemsRunTimeInfo.each((_, itemRunTimeInfo) => {\r\n if (isDefined(itemRunTimeInfo.item)) {\r\n var dataField = itemRunTimeInfo.item.dataField;\r\n if (dataField && isDefined(itemRunTimeInfo.widgetInstance)) {\r\n var valueGetter = compileGetter(dataField);\r\n var dataValue = valueGetter(args.value);\r\n var {\r\n allowIndeterminateState: allowIndeterminateState,\r\n editorType: editorType\r\n } = itemRunTimeInfo.item;\r\n if (void 0 !== dataValue || this._isCheckboxUndefinedStateEnabled({\r\n allowIndeterminateState: allowIndeterminateState,\r\n editorType: editorType,\r\n dataField: dataField\r\n })) {\r\n itemRunTimeInfo.widgetInstance.option(\"value\", dataValue)\r\n } else {\r\n this._resetWidget(itemRunTimeInfo.widgetInstance)\r\n }\r\n }\r\n }\r\n })\r\n }\r\n } else {\r\n this._initDataAndItems(args.value);\r\n this._invalidate()\r\n }\r\n break;\r\n case \"items\":\r\n this._cleanItemWatchers();\r\n this._initDataAndItems(args.value);\r\n this._invalidate();\r\n break;\r\n case \"alignItemLabels\":\r\n case \"labelLocation\":\r\n case \"labelMode\":\r\n case \"requiredMessage\":\r\n this._invalidate();\r\n break;\r\n case \"customizeItem\":\r\n this._updateItems(this.option(\"layoutData\"));\r\n this._invalidate();\r\n break;\r\n case \"colCount\":\r\n this._resetColCount();\r\n break;\r\n case \"minColWidth\":\r\n if (\"auto\" === this.option(\"colCount\")) {\r\n this._resetColCount()\r\n }\r\n break;\r\n case \"readOnly\":\r\n break;\r\n case \"width\":\r\n this.callBase(args);\r\n if (\"auto\" === this.option(\"colCount\")) {\r\n this._resetColCount()\r\n }\r\n break;\r\n case \"onFieldDataChanged\":\r\n break;\r\n default:\r\n this.callBase(args)\r\n }\r\n },\r\n _resetColCount: function() {\r\n this._cashedColCount = null;\r\n this._invalidate()\r\n },\r\n linkEditorToDataField(editorInstance, dataField) {\r\n this.on(\"optionChanged\", args => {\r\n if (args.fullName === \"layoutData.\".concat(dataField)) {\r\n editorInstance._setOptionWithoutOptionChange(\"value\", args.value)\r\n }\r\n });\r\n editorInstance.on(\"valueChanged\", args => {\r\n var isValueReferenceType = isObject(args.value) || Array.isArray(args.value);\r\n if (!this._disableEditorValueChangedHandler && !(isValueReferenceType && args.value === args.previousValue)) {\r\n this._updateFieldValue(dataField, args.value)\r\n }\r\n })\r\n },\r\n _dimensionChanged: function() {\r\n if (\"auto\" === this.option(\"colCount\") && this.isCachedColCountObsolete()) {\r\n this._eventsStrategy.fireEvent(\"autoColCountChanged\")\r\n }\r\n },\r\n updateData: function(data, value) {\r\n var that = this;\r\n if (isObject(data)) {\r\n each(data, (function(dataField, fieldValue) {\r\n that._updateFieldValue(dataField, fieldValue)\r\n }))\r\n } else if (\"string\" === typeof data) {\r\n that._updateFieldValue(data, value)\r\n }\r\n },\r\n getEditor: function(field) {\r\n return this._itemsRunTimeInfo.findWidgetInstanceByDataField(field) || this._itemsRunTimeInfo.findWidgetInstanceByName(field)\r\n },\r\n isSingleColumnMode: function(component) {\r\n var responsiveBox = this._responsiveBox || component;\r\n if (responsiveBox) {\r\n return responsiveBox.option(\"currentScreenFactor\") === responsiveBox.option(\"singleColumnScreen\")\r\n }\r\n },\r\n getItemsRunTimeInfo: function() {\r\n return this._itemsRunTimeInfo\r\n }\r\n});\r\nregisterComponent(\"dxLayoutManager\", LayoutManager);\r\nexport default LayoutManager;\r\n","/**\r\n * DevExtreme (esm/ui/validation_summary.js)\r\n * Version: 22.1.6\r\n * Build date: Tue Oct 18 2022\r\n *\r\n * Copyright (c) 2012 - 2022 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 eventsEngine from \"../events/core/events_engine\";\r\nimport {\r\n grep\r\n} from \"../core/utils/common\";\r\nimport {\r\n extend\r\n} from \"../core/utils/extend\";\r\nimport {\r\n each,\r\n map\r\n} from \"../core/utils/iterator\";\r\nimport ValidationEngine from \"./validation_engine\";\r\nimport CollectionWidget from \"./collection/ui.collection_widget.edit\";\r\nvar VALIDATION_SUMMARY_CLASS = \"dx-validationsummary\";\r\nvar ITEM_CLASS = VALIDATION_SUMMARY_CLASS + \"-item\";\r\nvar ITEM_DATA_KEY = VALIDATION_SUMMARY_CLASS + \"-item-data\";\r\nvar ValidationSummary = CollectionWidget.inherit({\r\n _getDefaultOptions() {\r\n return extend(this.callBase(), {\r\n focusStateEnabled: false,\r\n noDataText: null\r\n })\r\n },\r\n _setOptionsByReference() {\r\n this.callBase();\r\n extend(this._optionsByReference, {\r\n validationGroup: true\r\n })\r\n },\r\n _init() {\r\n this.callBase();\r\n this._initGroupRegistration()\r\n },\r\n _initGroupRegistration() {\r\n var $element = this.$element();\r\n var group = this.option(\"validationGroup\") || ValidationEngine.findGroup($element, this._modelByElement($element));\r\n var groupConfig = ValidationEngine.addGroup(group);\r\n this._unsubscribeGroup();\r\n this._groupWasInit = true;\r\n this._validationGroup = group;\r\n this.groupSubscription = this._groupValidationHandler.bind(this);\r\n groupConfig.on(\"validated\", this.groupSubscription)\r\n },\r\n _unsubscribeGroup() {\r\n var groupConfig = ValidationEngine.getGroupConfig(this._validationGroup);\r\n groupConfig && groupConfig.off(\"validated\", this.groupSubscription)\r\n },\r\n _getOrderedItems(validators, items) {\r\n var orderedItems = [];\r\n each(validators, (function(_, validator) {\r\n var foundItems = grep(items, (function(item) {\r\n if (item.validator === validator) {\r\n return true\r\n }\r\n }));\r\n if (foundItems.length) {\r\n orderedItems = orderedItems.concat(foundItems)\r\n }\r\n }));\r\n return orderedItems\r\n },\r\n _groupValidationHandler(params) {\r\n var items = this._getOrderedItems(params.validators, map(params.brokenRules, (function(rule) {\r\n return {\r\n text: rule.message,\r\n validator: rule.validator,\r\n index: rule.index\r\n }\r\n })));\r\n this.validators = params.validators;\r\n each(this.validators, (_, validator) => {\r\n if (validator._validationSummary !== this) {\r\n var handler = this._itemValidationHandler.bind(this);\r\n validator.on(\"validated\", handler);\r\n validator.on(\"disposing\", (function() {\r\n validator.off(\"validated\", handler);\r\n validator._validationSummary = null;\r\n handler = null\r\n }));\r\n validator._validationSummary = this\r\n }\r\n });\r\n this.option(\"items\", items)\r\n },\r\n _itemValidationHandler(_ref) {\r\n var {\r\n isValid: isValid,\r\n validator: validator,\r\n brokenRules: brokenRules\r\n } = _ref;\r\n var items = this.option(\"items\");\r\n var itemsChanged = false;\r\n var itemIndex = 0;\r\n var _loop = function() {\r\n var item = items[itemIndex];\r\n if (item.validator === validator) {\r\n var foundRule = grep(brokenRules || [], (function(rule) {\r\n return rule.index === item.index\r\n }))[0];\r\n if (isValid || !foundRule) {\r\n items.splice(itemIndex, 1);\r\n itemsChanged = true;\r\n return \"continue\"\r\n }\r\n if (foundRule.message !== item.text) {\r\n item.text = foundRule.message;\r\n itemsChanged = true\r\n }\r\n }\r\n itemIndex++\r\n };\r\n while (itemIndex < items.length) {\r\n var _ret = _loop();\r\n if (\"continue\" === _ret) {\r\n continue\r\n }\r\n }\r\n each(brokenRules, (function(_, rule) {\r\n var foundItem = grep(items, (function(item) {\r\n return item.validator === validator && item.index === rule.index\r\n }))[0];\r\n if (!foundItem) {\r\n items.push({\r\n text: rule.message,\r\n validator: validator,\r\n index: rule.index\r\n });\r\n itemsChanged = true\r\n }\r\n }));\r\n if (itemsChanged) {\r\n items = this._getOrderedItems(this.validators, items);\r\n this.option(\"items\", items)\r\n }\r\n },\r\n _initMarkup() {\r\n this.$element().addClass(VALIDATION_SUMMARY_CLASS);\r\n this.callBase()\r\n },\r\n _optionChanged(args) {\r\n switch (args.name) {\r\n case \"validationGroup\":\r\n this._initGroupRegistration();\r\n break;\r\n default:\r\n this.callBase(args)\r\n }\r\n },\r\n _itemClass: () => ITEM_CLASS,\r\n _itemDataKey: () => ITEM_DATA_KEY,\r\n _postprocessRenderItem(params) {\r\n eventsEngine.on(params.itemElement, \"click\", (function() {\r\n params.itemData.validator && params.itemData.validator.focus && params.itemData.validator.focus()\r\n }))\r\n },\r\n _dispose() {\r\n this.callBase();\r\n this._unsubscribeGroup()\r\n },\r\n refreshValidationGroup() {\r\n this._initGroupRegistration()\r\n }\r\n});\r\nregisterComponent(\"dxValidationSummary\", ValidationSummary);\r\nexport default ValidationSummary;\r\n","/**\r\n * DevExtreme (esm/ui/validation_group.js)\r\n * Version: 22.1.6\r\n * Build date: Tue Oct 18 2022\r\n *\r\n * Copyright (c) 2012 - 2022 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 registerComponent from \"../core/component_registrator\";\r\nimport DOMComponent from \"../core/dom_component\";\r\nimport ValidationSummary from \"./validation_summary\";\r\nimport ValidationEngine from \"./validation_engine\";\r\nimport Validator from \"./validator\";\r\nvar VALIDATION_ENGINE_CLASS = \"dx-validationgroup\";\r\nvar VALIDATOR_CLASS = \"dx-validator\";\r\nvar VALIDATION_SUMMARY_CLASS = \"dx-validationsummary\";\r\nclass ValidationGroup extends DOMComponent {\r\n _getDefaultOptions() {\r\n return super._getDefaultOptions()\r\n }\r\n _init() {\r\n super._init();\r\n ValidationEngine.addGroup(this)\r\n }\r\n _initMarkup() {\r\n var $element = this.$element();\r\n $element.addClass(VALIDATION_ENGINE_CLASS);\r\n $element.find(\".\".concat(VALIDATOR_CLASS)).each((function(_, validatorContainer) {\r\n Validator.getInstance($(validatorContainer))._initGroupRegistration()\r\n }));\r\n $element.find(\".\".concat(VALIDATION_SUMMARY_CLASS)).each((function(_, summaryContainer) {\r\n ValidationSummary.getInstance($(summaryContainer)).refreshValidationGroup()\r\n }));\r\n super._initMarkup()\r\n }\r\n validate() {\r\n return ValidationEngine.validateGroup(this)\r\n }\r\n reset() {\r\n return ValidationEngine.resetGroup(this)\r\n }\r\n _dispose() {\r\n ValidationEngine.removeGroup(this);\r\n this.$element().removeClass(VALIDATION_ENGINE_CLASS);\r\n super._dispose()\r\n }\r\n _useTemplates() {\r\n return false\r\n }\r\n}\r\nregisterComponent(\"dxValidationGroup\", ValidationGroup);\r\nexport default ValidationGroup;\r\n","/**\r\n * DevExtreme (esm/ui/form/ui.form.js)\r\n * Version: 22.1.6\r\n * Build date: Tue Oct 18 2022\r\n *\r\n * Copyright (c) 2012 - 2022 Developer Express Inc. ALL RIGHTS RESERVED\r\n * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/\r\n */\r\nimport _extends from \"@babel/runtime/helpers/esm/extends\";\r\nimport $ from \"../../core/renderer\";\r\nimport eventsEngine from \"../../events/core/events_engine\";\r\nimport registerComponent from \"../../core/component_registrator\";\r\nimport Guid from \"../../core/guid\";\r\nimport {\r\n ensureDefined\r\n} from \"../../core/utils/common\";\r\nimport config from \"../../core/config\";\r\nimport {\r\n isDefined,\r\n isEmptyObject,\r\n isObject,\r\n isString\r\n} from \"../../core/utils/type\";\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 triggerResizeEvent,\r\n triggerShownEvent\r\n} from \"../../events/visibility_change\";\r\nimport {\r\n getPublicElement\r\n} from \"../../core/element\";\r\nimport messageLocalization from \"../../localization/message\";\r\nimport Widget from \"../widget/ui.widget\";\r\nimport Editor from \"../editor/editor\";\r\nimport {\r\n defaultScreenFactorFunc,\r\n getCurrentScreenFactor,\r\n hasWindow\r\n} from \"../../core/utils/window\";\r\nimport ValidationEngine from \"../validation_engine\";\r\nimport {\r\n default as FormItemsRunTimeInfo\r\n} from \"./ui.form.items_runtime_info\";\r\nimport TabPanel from \"../tab_panel\";\r\nimport Scrollable from \"../scroll_view/ui.scrollable\";\r\nimport {\r\n Deferred\r\n} from \"../../core/utils/deferred\";\r\nimport {\r\n isMaterial\r\n} from \"../themes\";\r\nimport tryCreateItemOptionAction from \"./ui.form.item_options_actions\";\r\nimport \"./ui.form.layout_manager\";\r\nimport {\r\n concatPaths,\r\n createItemPathByIndex,\r\n getFullOptionName,\r\n getOptionNameFromFullName,\r\n tryGetTabPath,\r\n getTextWithoutSpaces,\r\n isEqualToDataFieldOrNameOrTitleOrCaption,\r\n isFullPathContainsTabs,\r\n getItemPath,\r\n convertToLayoutManagerOptions\r\n} from \"./ui.form.utils\";\r\nimport {\r\n convertToLabelMarkOptions\r\n} from \"./ui.form.layout_manager.utils\";\r\nimport {\r\n setLabelWidthByMaxLabelWidth\r\n} from \"./components/label\";\r\nimport \"../validation_summary\";\r\nimport \"../validation_group\";\r\nimport {\r\n FORM_CLASS,\r\n FIELD_ITEM_CLASS,\r\n FORM_GROUP_CLASS,\r\n FORM_GROUP_CONTENT_CLASS,\r\n FIELD_ITEM_CONTENT_HAS_GROUP_CLASS,\r\n FIELD_ITEM_CONTENT_HAS_TABS_CLASS,\r\n FORM_GROUP_WITH_CAPTION_CLASS,\r\n FORM_GROUP_CAPTION_CLASS,\r\n FIELD_ITEM_TAB_CLASS,\r\n FORM_FIELD_ITEM_COL_CLASS,\r\n GROUP_COL_COUNT_CLASS,\r\n GROUP_COL_COUNT_ATTR,\r\n FIELD_ITEM_CONTENT_CLASS,\r\n FORM_VALIDATION_SUMMARY,\r\n ROOT_SIMPLE_ITEM_CLASS,\r\n FORM_UNDERLINED_CLASS\r\n} from \"./constants\";\r\nimport {\r\n TOOLBAR_CLASS\r\n} from \"../toolbar/constants\";\r\nvar FOCUSED_STATE_CLASS = \"dx-state-focused\";\r\nvar ITEM_OPTIONS_FOR_VALIDATION_UPDATING = [\"items\", \"isRequired\", \"validationRules\", \"visible\"];\r\nvar Form = Widget.inherit({\r\n _init: function() {\r\n this.callBase();\r\n this._cachedColCountOptions = [];\r\n this._itemsRunTimeInfo = new FormItemsRunTimeInfo;\r\n this._groupsColCount = [];\r\n this._attachSyncSubscriptions()\r\n },\r\n _getDefaultOptions: function() {\r\n return extend(this.callBase(), {\r\n formID: \"dx-\" + new Guid,\r\n formData: {},\r\n colCount: 1,\r\n screenByWidth: defaultScreenFactorFunc,\r\n colCountByScreen: void 0,\r\n labelLocation: \"left\",\r\n readOnly: false,\r\n onFieldDataChanged: null,\r\n customizeItem: null,\r\n onEditorEnterKey: null,\r\n minColWidth: 200,\r\n alignItemLabels: true,\r\n alignItemLabelsInAllGroups: true,\r\n alignRootItemLabels: true,\r\n showColonAfterLabel: true,\r\n showRequiredMark: true,\r\n showOptionalMark: false,\r\n requiredMark: \"*\",\r\n optionalMark: messageLocalization.format(\"dxForm-optionalMark\"),\r\n requiredMessage: messageLocalization.getFormatter(\"dxForm-requiredMessage\"),\r\n showValidationSummary: false,\r\n items: void 0,\r\n scrollingEnabled: false,\r\n validationGroup: void 0,\r\n stylingMode: config().editorStylingMode,\r\n labelMode: \"outside\"\r\n })\r\n },\r\n _defaultOptionsRules: function() {\r\n return this.callBase().concat([{\r\n device: function() {\r\n return isMaterial()\r\n },\r\n options: {\r\n showColonAfterLabel: false,\r\n labelLocation: \"top\"\r\n }\r\n }])\r\n },\r\n _setOptionsByReference: function() {\r\n this.callBase();\r\n extend(this._optionsByReference, {\r\n formData: true,\r\n validationGroup: true\r\n })\r\n },\r\n _getGroupColCount: function($element) {\r\n return parseInt($element.attr(GROUP_COL_COUNT_ATTR))\r\n },\r\n _applyLabelsWidthByCol: function($container, index) {\r\n var options = arguments.length > 2 && void 0 !== arguments[2] ? arguments[2] : {};\r\n var labelMarkOptions = arguments.length > 3 ? arguments[3] : void 0;\r\n var fieldItemClass = options.inOneColumn ? FIELD_ITEM_CLASS : FORM_FIELD_ITEM_COL_CLASS + index;\r\n var cssExcludeTabbedSelector = options.excludeTabbed ? \":not(.\".concat(FIELD_ITEM_TAB_CLASS, \")\") : \"\";\r\n setLabelWidthByMaxLabelWidth($container, \".\".concat(fieldItemClass).concat(cssExcludeTabbedSelector), labelMarkOptions);\r\n return\r\n },\r\n _applyLabelsWidth: function($container, excludeTabbed, inOneColumn, colCount, labelMarkOptions) {\r\n colCount = inOneColumn ? 1 : colCount || this._getGroupColCount($container);\r\n var applyLabelsOptions = {\r\n excludeTabbed: excludeTabbed,\r\n inOneColumn: inOneColumn\r\n };\r\n var i;\r\n for (i = 0; i < colCount; i++) {\r\n this._applyLabelsWidthByCol($container, i, applyLabelsOptions, labelMarkOptions)\r\n }\r\n },\r\n _getGroupElementsInColumn: function($container, columnIndex, colCount) {\r\n var cssColCountSelector = isDefined(colCount) ? \".\" + GROUP_COL_COUNT_CLASS + colCount : \"\";\r\n var groupSelector = \".\" + FORM_FIELD_ITEM_COL_CLASS + columnIndex + \" > .\" + FIELD_ITEM_CONTENT_CLASS + \" > .\" + FORM_GROUP_CLASS + cssColCountSelector;\r\n return $container.find(groupSelector)\r\n },\r\n _applyLabelsWidthWithGroups: function($container, colCount, excludeTabbed, labelMarkOptions) {\r\n if (true === this.option(\"alignRootItemLabels\")) {\r\n var $rootSimpleItems = $container.find(\".\".concat(ROOT_SIMPLE_ITEM_CLASS));\r\n for (var colIndex = 0; colIndex < colCount; colIndex++) {\r\n this._applyLabelsWidthByCol($rootSimpleItems, colIndex, excludeTabbed, labelMarkOptions)\r\n }\r\n }\r\n var alignItemLabelsInAllGroups = this.option(\"alignItemLabelsInAllGroups\");\r\n if (alignItemLabelsInAllGroups) {\r\n this._applyLabelsWidthWithNestedGroups($container, colCount, excludeTabbed, labelMarkOptions)\r\n } else {\r\n var $groups = this.$element().find(\".\" + FORM_GROUP_CLASS);\r\n var i;\r\n for (i = 0; i < $groups.length; i++) {\r\n this._applyLabelsWidth($groups.eq(i), excludeTabbed, void 0, void 0, labelMarkOptions)\r\n }\r\n }\r\n },\r\n _applyLabelsWidthWithNestedGroups: function($container, colCount, excludeTabbed, labelMarkOptions) {\r\n var applyLabelsOptions = {\r\n excludeTabbed: excludeTabbed\r\n };\r\n var colIndex;\r\n var groupsColIndex;\r\n var groupColIndex;\r\n var $groupsByCol;\r\n for (colIndex = 0; colIndex < colCount; colIndex++) {\r\n $groupsByCol = this._getGroupElementsInColumn($container, colIndex);\r\n this._applyLabelsWidthByCol($groupsByCol, 0, applyLabelsOptions, labelMarkOptions);\r\n for (groupsColIndex = 0; groupsColIndex < this._groupsColCount.length; groupsColIndex++) {\r\n $groupsByCol = this._getGroupElementsInColumn($container, colIndex, this._groupsColCount[groupsColIndex]);\r\n var groupColCount = this._getGroupColCount($groupsByCol);\r\n for (groupColIndex = 1; groupColIndex < groupColCount; groupColIndex++) {\r\n this._applyLabelsWidthByCol($groupsByCol, groupColIndex, applyLabelsOptions, labelMarkOptions)\r\n }\r\n }\r\n }\r\n },\r\n _labelLocation: function() {\r\n return this.option(\"labelLocation\")\r\n },\r\n _alignLabelsInColumn: function(_ref) {\r\n var {\r\n layoutManager: layoutManager,\r\n inOneColumn: inOneColumn,\r\n $container: $container,\r\n excludeTabbed: excludeTabbed,\r\n items: items\r\n } = _ref;\r\n if (!hasWindow() || \"top\" === this._labelLocation()) {\r\n return\r\n }\r\n var labelMarkOptions = convertToLabelMarkOptions(layoutManager._getMarkOptions());\r\n if (inOneColumn) {\r\n this._applyLabelsWidth($container, excludeTabbed, true, void 0, labelMarkOptions)\r\n } else if (this._checkGrouping(items)) {\r\n this._applyLabelsWidthWithGroups($container, layoutManager._getColCount(), excludeTabbed, labelMarkOptions)\r\n } else {\r\n this._applyLabelsWidth($container, excludeTabbed, false, layoutManager._getColCount(), labelMarkOptions)\r\n }\r\n },\r\n _prepareFormData: function() {\r\n if (!isDefined(this.option(\"formData\"))) {\r\n this.option(\"formData\", {})\r\n }\r\n },\r\n _setStylingModeClass: function() {\r\n if (\"underlined\" === this.option(\"stylingMode\")) {\r\n this.$element().addClass(FORM_UNDERLINED_CLASS)\r\n }\r\n },\r\n _initMarkup: function() {\r\n ValidationEngine.addGroup(this._getValidationGroup());\r\n this._clearCachedInstances();\r\n this._prepareFormData();\r\n this.$element().addClass(FORM_CLASS);\r\n this._setStylingModeClass();\r\n this.callBase();\r\n this.setAria(\"role\", \"form\", this.$element());\r\n if (this.option(\"scrollingEnabled\")) {\r\n this._renderScrollable()\r\n }\r\n this._renderLayout();\r\n this._renderValidationSummary();\r\n this._lastMarkupScreenFactor = this._targetScreenFactor || this._getCurrentScreenFactor()\r\n },\r\n _getCurrentScreenFactor: function() {\r\n return hasWindow() ? getCurrentScreenFactor(this.option(\"screenByWidth\")) : \"lg\"\r\n },\r\n _clearCachedInstances: function() {\r\n this._itemsRunTimeInfo.clear();\r\n this._cachedLayoutManagers = []\r\n },\r\n _alignLabels: function(layoutManager, inOneColumn) {\r\n this._alignLabelsInColumn({\r\n $container: this.$element(),\r\n layoutManager: layoutManager,\r\n excludeTabbed: true,\r\n items: this.option(\"items\"),\r\n inOneColumn: inOneColumn\r\n });\r\n triggerResizeEvent(this.$element().find(\".\".concat(TOOLBAR_CLASS)))\r\n },\r\n _clean: function() {\r\n this._clearValidationSummary();\r\n this.callBase();\r\n this._groupsColCount = [];\r\n this._cachedColCountOptions = [];\r\n this._lastMarkupScreenFactor = void 0\r\n },\r\n _renderScrollable: function() {\r\n var useNativeScrolling = this.option(\"useNativeScrolling\");\r\n this._scrollable = new Scrollable(this.$element(), {\r\n useNative: !!useNativeScrolling,\r\n useSimulatedScrollbar: !useNativeScrolling,\r\n useKeyboard: false,\r\n direction: \"both\",\r\n bounceEnabled: false\r\n })\r\n },\r\n _getContent: function() {\r\n return this.option(\"scrollingEnabled\") ? $(this._scrollable.content()) : this.$element()\r\n },\r\n _clearValidationSummary: function() {\r\n var _this$_$validationSum;\r\n null === (_this$_$validationSum = this._$validationSummary) || void 0 === _this$_$validationSum ? void 0 : _this$_$validationSum.remove();\r\n this._$validationSummary = void 0;\r\n this._validationSummary = void 0\r\n },\r\n _renderValidationSummary: function() {\r\n this._clearValidationSummary();\r\n if (this.option(\"showValidationSummary\")) {\r\n this._$validationSummary = $(\"
\").addClass(FORM_VALIDATION_SUMMARY).appendTo(this._getContent());\r\n this._validationSummary = this._$validationSummary.dxValidationSummary({\r\n validationGroup: this._getValidationGroup()\r\n }).dxValidationSummary(\"instance\")\r\n }\r\n },\r\n _prepareItems(items, parentIsTabbedItem, currentPath, isTabs) {\r\n if (items) {\r\n var result = [];\r\n for (var i = 0; i < items.length; i++) {\r\n var item = items[i];\r\n var path = concatPaths(currentPath, createItemPathByIndex(i, isTabs));\r\n var itemRunTimeInfo = {\r\n item: item,\r\n itemIndex: i,\r\n path: path\r\n };\r\n var guid = this._itemsRunTimeInfo.add(itemRunTimeInfo);\r\n if (isString(item)) {\r\n item = {\r\n dataField: item\r\n }\r\n }\r\n if (isObject(item)) {\r\n var preparedItem = _extends({}, item);\r\n itemRunTimeInfo.preparedItem = preparedItem;\r\n preparedItem.guid = guid;\r\n this._tryPrepareGroupItem(preparedItem);\r\n this._tryPrepareTabbedItem(preparedItem, path);\r\n this._tryPrepareItemTemplate(preparedItem);\r\n if (parentIsTabbedItem) {\r\n preparedItem.cssItemClass = FIELD_ITEM_TAB_CLASS\r\n }\r\n if (preparedItem.items) {\r\n preparedItem.items = this._prepareItems(preparedItem.items, parentIsTabbedItem, path)\r\n }\r\n result.push(preparedItem)\r\n } else {\r\n result.push(item)\r\n }\r\n }\r\n return result\r\n }\r\n },\r\n _tryPrepareGroupItem: function(item) {\r\n if (\"group\" === item.itemType) {\r\n item.alignItemLabels = ensureDefined(item.alignItemLabels, true);\r\n item._prepareGroupItemTemplate = itemTemplate => {\r\n if (item.template) {\r\n item.groupContentTemplate = this._getTemplate(itemTemplate)\r\n }\r\n item.template = this._itemGroupTemplate.bind(this, item)\r\n };\r\n item._prepareGroupItemTemplate(item.template)\r\n }\r\n },\r\n _tryPrepareTabbedItem: function(item, path) {\r\n if (\"tabbed\" === item.itemType) {\r\n item.template = this._itemTabbedTemplate.bind(this, item);\r\n item.tabs = this._prepareItems(item.tabs, true, path, true)\r\n }\r\n },\r\n _tryPrepareItemTemplate: function(item) {\r\n if (item.template) {\r\n item.template = this._getTemplate(item.template)\r\n }\r\n },\r\n _checkGrouping: function(items) {\r\n if (items) {\r\n for (var i = 0; i < items.length; i++) {\r\n var item = items[i];\r\n if (\"group\" === item.itemType) {\r\n return true\r\n }\r\n }\r\n }\r\n },\r\n _renderLayout: function() {\r\n var that = this;\r\n var items = that.option(\"items\");\r\n var $content = that._getContent();\r\n items = that._prepareItems(items);\r\n that._rootLayoutManager = that._renderLayoutManager($content, this._createLayoutManagerOptions(items, {\r\n isRoot: true,\r\n colCount: that.option(\"colCount\"),\r\n alignItemLabels: that.option(\"alignItemLabels\"),\r\n screenByWidth: this.option(\"screenByWidth\"),\r\n colCountByScreen: this.option(\"colCountByScreen\"),\r\n onLayoutChanged: function(inOneColumn) {\r\n that._alignLabels.bind(that)(that._rootLayoutManager, inOneColumn)\r\n },\r\n onContentReady: function(e) {\r\n that._alignLabels(e.component, e.component.isSingleColumnMode())\r\n }\r\n }))\r\n },\r\n _tryGetItemsForTemplate: function(item) {\r\n return item.items || []\r\n },\r\n _itemTabbedTemplate: function(item, e, $container) {\r\n var $tabPanel = $(\"
\").appendTo($container);\r\n var tabPanelOptions = extend({}, item.tabPanelOptions, {\r\n dataSource: item.tabs,\r\n onItemRendered: args => triggerShownEvent(args.itemElement),\r\n itemTemplate: (itemData, e, container) => {\r\n var $container = $(container);\r\n var alignItemLabels = ensureDefined(itemData.alignItemLabels, true);\r\n var layoutManager = this._renderLayoutManager($container, this._createLayoutManagerOptions(this._tryGetItemsForTemplate(itemData), {\r\n colCount: itemData.colCount,\r\n alignItemLabels: alignItemLabels,\r\n screenByWidth: this.option(\"screenByWidth\"),\r\n colCountByScreen: itemData.colCountByScreen,\r\n cssItemClass: itemData.cssItemClass,\r\n onLayoutChanged: inOneColumn => {\r\n this._alignLabelsInColumn({\r\n $container: $container,\r\n layoutManager: layoutManager,\r\n items: itemData.items,\r\n inOneColumn: inOneColumn\r\n })\r\n }\r\n }));\r\n if (this._itemsRunTimeInfo) {\r\n this._itemsRunTimeInfo.extendRunTimeItemInfoByKey(itemData.guid, {\r\n layoutManager: layoutManager\r\n })\r\n }\r\n if (alignItemLabels) {\r\n this._alignLabelsInColumn({\r\n $container: $container,\r\n layoutManager: layoutManager,\r\n items: itemData.items,\r\n inOneColumn: layoutManager.isSingleColumnMode()\r\n })\r\n }\r\n }\r\n });\r\n var tryUpdateTabPanelInstance = (items, instance) => {\r\n if (Array.isArray(items)) {\r\n items.forEach(item => this._itemsRunTimeInfo.extendRunTimeItemInfoByKey(item.guid, {\r\n widgetInstance: instance\r\n }))\r\n }\r\n };\r\n var tabPanel = this._createComponent($tabPanel, TabPanel, tabPanelOptions);\r\n $($container).parent().addClass(FIELD_ITEM_CONTENT_HAS_TABS_CLASS);\r\n tabPanel.on(\"optionChanged\", e => {\r\n if (\"dataSource\" === e.fullName) {\r\n tryUpdateTabPanelInstance(e.value, e.component)\r\n }\r\n });\r\n tryUpdateTabPanelInstance([{\r\n guid: item.guid\r\n }, ...item.tabs], tabPanel)\r\n },\r\n _itemGroupTemplate: function(item, e, $container) {\r\n var $group = $(\"
\").toggleClass(FORM_GROUP_WITH_CAPTION_CLASS, isDefined(item.caption) && item.caption.length).addClass(FORM_GROUP_CLASS).appendTo($container);\r\n $($container).parent().addClass(FIELD_ITEM_CONTENT_HAS_GROUP_CLASS);\r\n var colCount;\r\n var layoutManager;\r\n if (item.caption) {\r\n $(\"
\").addClass(FORM_GROUP_CAPTION_CLASS).text(item.caption).appendTo($group)\r\n }\r\n var $groupContent = $(\"\").addClass(FORM_GROUP_CONTENT_CLASS).appendTo($group);\r\n if (item.groupContentTemplate) {\r\n item._renderGroupContentTemplate = () => {\r\n $groupContent.empty();\r\n var data = {\r\n formData: this.option(\"formData\"),\r\n component: this\r\n };\r\n item.groupContentTemplate.render({\r\n model: data,\r\n container: getPublicElement($groupContent)\r\n })\r\n };\r\n item._renderGroupContentTemplate()\r\n } else {\r\n layoutManager = this._renderLayoutManager($groupContent, this._createLayoutManagerOptions(this._tryGetItemsForTemplate(item), {\r\n colCount: item.colCount,\r\n colCountByScreen: item.colCountByScreen,\r\n alignItemLabels: item.alignItemLabels,\r\n cssItemClass: item.cssItemClass\r\n }));\r\n this._itemsRunTimeInfo && this._itemsRunTimeInfo.extendRunTimeItemInfoByKey(item.guid, {\r\n layoutManager: layoutManager\r\n });\r\n colCount = layoutManager._getColCount();\r\n if (!this._groupsColCount.includes(colCount)) {\r\n this._groupsColCount.push(colCount)\r\n }\r\n $group.addClass(GROUP_COL_COUNT_CLASS + colCount);\r\n $group.attr(GROUP_COL_COUNT_ATTR, colCount)\r\n }\r\n },\r\n _createLayoutManagerOptions: function(items, extendedLayoutManagerOptions) {\r\n return convertToLayoutManagerOptions({\r\n form: this,\r\n formOptions: this.option(),\r\n $formElement: this.$element(),\r\n items: items,\r\n validationGroup: this._getValidationGroup(),\r\n extendedLayoutManagerOptions: extendedLayoutManagerOptions,\r\n onFieldDataChanged: args => {\r\n if (!this._isDataUpdating) {\r\n this._triggerOnFieldDataChanged(args)\r\n }\r\n },\r\n onContentReady: args => {\r\n this._itemsRunTimeInfo.addItemsOrExtendFrom(args.component._itemsRunTimeInfo);\r\n extendedLayoutManagerOptions.onContentReady && extendedLayoutManagerOptions.onContentReady(args)\r\n },\r\n onDisposing: _ref2 => {\r\n var {\r\n component: component\r\n } = _ref2;\r\n var nestedItemsRunTimeInfo = component.getItemsRunTimeInfo();\r\n this._itemsRunTimeInfo.removeItemsByItems(nestedItemsRunTimeInfo)\r\n },\r\n onFieldItemRendered: () => {\r\n var _this$_validationSumm;\r\n null === (_this$_validationSumm = this._validationSummary) || void 0 === _this$_validationSumm ? void 0 : _this$_validationSumm.refreshValidationGroup()\r\n }\r\n })\r\n },\r\n _renderLayoutManager: function($parent, layoutManagerOptions) {\r\n var baseColCountByScreen = {\r\n lg: layoutManagerOptions.colCount,\r\n md: layoutManagerOptions.colCount,\r\n sm: layoutManagerOptions.colCount,\r\n xs: 1\r\n };\r\n this._cachedColCountOptions.push({\r\n colCountByScreen: extend(baseColCountByScreen, layoutManagerOptions.colCountByScreen)\r\n });\r\n var $element = $(\"
\");\r\n $element.appendTo($parent);\r\n var instance = this._createComponent($element, \"dxLayoutManager\", layoutManagerOptions);\r\n instance.on(\"autoColCountChanged\", () => {\r\n this._clearAutoColCountChangedTimeout();\r\n this.autoColCountChangedTimeoutId = setTimeout(() => !this._disposed && this._refresh(), 0)\r\n });\r\n this._cachedLayoutManagers.push(instance);\r\n return instance\r\n },\r\n _getValidationGroup: function() {\r\n return this.option(\"validationGroup\") || this\r\n },\r\n _createComponent: function($element, type, config) {\r\n config = config || {};\r\n this._extendConfig(config, {\r\n readOnly: this.option(\"readOnly\")\r\n });\r\n return this.callBase($element, type, config)\r\n },\r\n _attachSyncSubscriptions: function() {\r\n var that = this;\r\n that.on(\"optionChanged\", (function(args) {\r\n var optionFullName = args.fullName;\r\n if (\"formData\" === optionFullName) {\r\n if (!isDefined(args.value)) {\r\n that._options.silent(\"formData\", args.value = {})\r\n }\r\n that._triggerOnFieldDataChangedByDataSet(args.value)\r\n }\r\n if (that._cachedLayoutManagers.length) {\r\n each(that._cachedLayoutManagers, (function(index, layoutManager) {\r\n if (\"formData\" === optionFullName) {\r\n that._isDataUpdating = true;\r\n layoutManager.option(\"layoutData\", args.value);\r\n that._isDataUpdating = false\r\n }\r\n if (\"readOnly\" === args.name || \"disabled\" === args.name) {\r\n layoutManager.option(optionFullName, args.value)\r\n }\r\n }))\r\n }\r\n }))\r\n },\r\n _optionChanged: function(args) {\r\n var splitFullName = args.fullName.split(\".\");\r\n if (splitFullName.length > 1 && -1 !== splitFullName[0].search(\"items\") && this._itemsOptionChangedHandler(args)) {\r\n return\r\n }\r\n if (splitFullName.length > 1 && -1 !== splitFullName[0].search(\"formData\") && this._formDataOptionChangedHandler(args)) {\r\n return\r\n }\r\n this._defaultOptionChangedHandler(args)\r\n },\r\n _defaultOptionChangedHandler: function(args) {\r\n switch (args.name) {\r\n case \"formData\":\r\n if (!this.option(\"items\")) {\r\n this._invalidate()\r\n } else if (isEmptyObject(args.value)) {\r\n this._resetValues()\r\n }\r\n break;\r\n case \"onFieldDataChanged\":\r\n break;\r\n case \"items\":\r\n case \"colCount\":\r\n case \"onEditorEnterKey\":\r\n case \"labelLocation\":\r\n case \"labelMode\":\r\n case \"alignItemLabels\":\r\n case \"showColonAfterLabel\":\r\n case \"customizeItem\":\r\n case \"alignItemLabelsInAllGroups\":\r\n case \"showRequiredMark\":\r\n case \"showOptionalMark\":\r\n case \"requiredMark\":\r\n case \"optionalMark\":\r\n case \"requiredMessage\":\r\n case \"scrollingEnabled\":\r\n case \"formID\":\r\n case \"colCountByScreen\":\r\n case \"screenByWidth\":\r\n case \"stylingMode\":\r\n this._invalidate();\r\n break;\r\n case \"showValidationSummary\":\r\n this._renderValidationSummary();\r\n break;\r\n case \"minColWidth\":\r\n if (\"auto\" === this.option(\"colCount\")) {\r\n this._invalidate()\r\n }\r\n break;\r\n case \"alignRootItemLabels\":\r\n case \"readOnly\":\r\n break;\r\n case \"width\":\r\n this.callBase(args);\r\n this._rootLayoutManager.option(args.name, args.value);\r\n this._alignLabels(this._rootLayoutManager, this._rootLayoutManager.isSingleColumnMode());\r\n break;\r\n case \"visible\":\r\n this.callBase(args);\r\n if (args.value) {\r\n triggerShownEvent(this.$element())\r\n }\r\n break;\r\n case \"validationGroup\":\r\n ValidationEngine.removeGroup(args.previousValue || this);\r\n this._invalidate();\r\n break;\r\n default:\r\n this.callBase(args)\r\n }\r\n },\r\n _itemsOptionChangedHandler: function(args) {\r\n var nameParts = args.fullName.split(\".\");\r\n var value = args.value;\r\n var itemPath = this._getItemPath(nameParts);\r\n var item = this.option(itemPath);\r\n var optionNameWithoutPath = args.fullName.replace(itemPath + \".\", \"\");\r\n var simpleOptionName = optionNameWithoutPath.split(\".\")[0].replace(/\\[\\d+]/, \"\");\r\n var itemAction = this._tryCreateItemOptionAction(simpleOptionName, item, item[simpleOptionName], args.previousValue, itemPath);\r\n var result = this._tryExecuteItemOptionAction(itemAction) || this._tryChangeLayoutManagerItemOption(args.fullName, value);\r\n if (!result && item) {\r\n this._changeItemOption(item, optionNameWithoutPath, value);\r\n var items = this._generateItemsFromData(this.option(\"items\"));\r\n this.option(\"items\", items);\r\n result = true\r\n }\r\n return result\r\n },\r\n _formDataOptionChangedHandler: function(args) {\r\n var nameParts = args.fullName.split(\".\");\r\n var value = args.value;\r\n var dataField = nameParts.slice(1).join(\".\");\r\n var editor = this.getEditor(dataField);\r\n if (editor) {\r\n editor.option(\"value\", value)\r\n } else {\r\n this._triggerOnFieldDataChanged({\r\n dataField: dataField,\r\n value: value\r\n })\r\n }\r\n return true\r\n },\r\n _tryCreateItemOptionAction: function(optionName, item, value, previousValue, itemPath) {\r\n if (\"tabs\" === optionName) {\r\n this._itemsRunTimeInfo.removeItemsByPathStartWith(\"\".concat(itemPath, \".tabs\"));\r\n value = this._prepareItems(value, true, itemPath, true)\r\n }\r\n return tryCreateItemOptionAction(optionName, {\r\n item: item,\r\n value: value,\r\n previousValue: previousValue,\r\n itemsRunTimeInfo: this._itemsRunTimeInfo\r\n })\r\n },\r\n _tryExecuteItemOptionAction: function(action) {\r\n return action && action.tryExecute()\r\n },\r\n _updateValidationGroupAndSummaryIfNeeded: function(fullName) {\r\n var optionName = getOptionNameFromFullName(fullName);\r\n if (ITEM_OPTIONS_FOR_VALIDATION_UPDATING.indexOf(optionName) > -1) {\r\n ValidationEngine.addGroup(this._getValidationGroup());\r\n if (this.option(\"showValidationSummary\")) {\r\n var _this$_validationSumm2;\r\n null === (_this$_validationSumm2 = this._validationSummary) || void 0 === _this$_validationSumm2 ? void 0 : _this$_validationSumm2.refreshValidationGroup()\r\n }\r\n }\r\n },\r\n _setLayoutManagerItemOption(layoutManager, optionName, value, path) {\r\n if (this._updateLockCount > 0) {\r\n !layoutManager._updateLockCount && layoutManager.beginUpdate();\r\n var key = this._itemsRunTimeInfo.findKeyByPath(path);\r\n this.postponedOperations.add(key, () => {\r\n !layoutManager._disposed && layoutManager.endUpdate();\r\n return (new Deferred).resolve()\r\n })\r\n }\r\n var contentReadyHandler = e => {\r\n e.component.off(\"contentReady\", contentReadyHandler);\r\n if (isFullPathContainsTabs(path)) {\r\n var tabPath = tryGetTabPath(path);\r\n var tabLayoutManager = this._itemsRunTimeInfo.findGroupOrTabLayoutManagerByPath(tabPath);\r\n if (tabLayoutManager) {\r\n this._alignLabelsInColumn({\r\n items: tabLayoutManager.option(\"items\"),\r\n layoutManager: tabLayoutManager,\r\n $container: tabLayoutManager.$element(),\r\n inOneColumn: tabLayoutManager.isSingleColumnMode()\r\n })\r\n }\r\n } else {\r\n this._alignLabels(this._rootLayoutManager, this._rootLayoutManager.isSingleColumnMode())\r\n }\r\n };\r\n layoutManager.on(\"contentReady\", contentReadyHandler);\r\n layoutManager.option(optionName, value);\r\n this._updateValidationGroupAndSummaryIfNeeded(optionName)\r\n },\r\n _tryChangeLayoutManagerItemOption(fullName, value) {\r\n var nameParts = fullName.split(\".\");\r\n var optionName = getOptionNameFromFullName(fullName);\r\n if (\"items\" === optionName && nameParts.length > 1) {\r\n var itemPath = this._getItemPath(nameParts);\r\n var layoutManager = this._itemsRunTimeInfo.findGroupOrTabLayoutManagerByPath(itemPath);\r\n if (layoutManager) {\r\n this._itemsRunTimeInfo.removeItemsByItems(layoutManager.getItemsRunTimeInfo());\r\n var items = this._prepareItems(value, false, itemPath);\r\n this._setLayoutManagerItemOption(layoutManager, optionName, items, itemPath);\r\n return true\r\n }\r\n } else if (nameParts.length > 2) {\r\n var endPartIndex = nameParts.length - 2;\r\n var _itemPath = this._getItemPath(nameParts.slice(0, endPartIndex));\r\n var _layoutManager = this._itemsRunTimeInfo.findGroupOrTabLayoutManagerByPath(_itemPath);\r\n if (_layoutManager) {\r\n var fullOptionName = getFullOptionName(nameParts[endPartIndex], optionName);\r\n if (\"editorType\" === optionName) {\r\n if (_layoutManager.option(fullOptionName) !== value) {\r\n return false\r\n }\r\n }\r\n if (\"visible\" === optionName) {\r\n var formItems = this.option(getFullOptionName(_itemPath, \"items\"));\r\n if (formItems && formItems.length) {\r\n var layoutManagerItems = _layoutManager.option(\"items\");\r\n formItems.forEach((item, index) => {\r\n var layoutItem = layoutManagerItems[index];\r\n layoutItem.visibleIndex = item.visibleIndex\r\n })\r\n }\r\n }\r\n this._setLayoutManagerItemOption(_layoutManager, fullOptionName, value, _itemPath);\r\n return true\r\n }\r\n }\r\n return false\r\n },\r\n _tryChangeLayoutManagerItemOptions(itemPath, options) {\r\n var result;\r\n this.beginUpdate();\r\n each(options, (optionName, optionValue) => {\r\n result = this._tryChangeLayoutManagerItemOption(getFullOptionName(itemPath, optionName), optionValue);\r\n if (!result) {\r\n return false\r\n }\r\n });\r\n this.endUpdate();\r\n return result\r\n },\r\n _getItemPath: function(nameParts) {\r\n var itemPath = nameParts[0];\r\n var i;\r\n for (i = 1; i < nameParts.length; i++) {\r\n if (-1 !== nameParts[i].search(/items\\[\\d+]|tabs\\[\\d+]/)) {\r\n itemPath += \".\" + nameParts[i]\r\n } else {\r\n break\r\n }\r\n }\r\n return itemPath\r\n },\r\n _triggerOnFieldDataChanged: function(args) {\r\n this._createActionByOption(\"onFieldDataChanged\")(args)\r\n },\r\n _triggerOnFieldDataChangedByDataSet: function(data) {\r\n var that = this;\r\n if (data && isObject(data)) {\r\n each(data, (function(dataField, value) {\r\n that._triggerOnFieldDataChanged({\r\n dataField: dataField,\r\n value: value\r\n })\r\n }))\r\n }\r\n },\r\n _updateFieldValue: function(dataField, value) {\r\n if (isDefined(this.option(\"formData\"))) {\r\n var editor = this.getEditor(dataField);\r\n this.option(\"formData.\" + dataField, value);\r\n if (editor) {\r\n var editorValue = editor.option(\"value\");\r\n if (editorValue !== value) {\r\n editor.option(\"value\", value)\r\n }\r\n }\r\n }\r\n },\r\n _generateItemsFromData: function(items) {\r\n var formData = this.option(\"formData\");\r\n var result = [];\r\n if (!items && isDefined(formData)) {\r\n each(formData, (function(dataField) {\r\n result.push({\r\n dataField: dataField\r\n })\r\n }))\r\n }\r\n if (items) {\r\n each(items, (function(index, item) {\r\n if (isObject(item)) {\r\n result.push(item)\r\n } else {\r\n result.push({\r\n dataField: item\r\n })\r\n }\r\n }))\r\n }\r\n return result\r\n },\r\n _getItemByField: function(field, items) {\r\n var that = this;\r\n var fieldParts = isObject(field) ? field : that._getFieldParts(field);\r\n var fieldName = fieldParts.fieldName;\r\n var fieldPath = fieldParts.fieldPath;\r\n var resultItem;\r\n if (items.length) {\r\n each(items, (function(index, item) {\r\n var itemType = item.itemType;\r\n if (fieldPath.length) {\r\n var path = fieldPath.slice();\r\n item = that._getItemByFieldPath(path, fieldName, item)\r\n } else if (\"group\" === itemType && !(item.caption || item.name) || \"tabbed\" === itemType && !item.name) {\r\n var subItemsField = that._getSubItemField(itemType);\r\n item.items = that._generateItemsFromData(item.items);\r\n item = that._getItemByField({\r\n fieldName: fieldName,\r\n fieldPath: fieldPath\r\n }, item[subItemsField])\r\n }\r\n if (isEqualToDataFieldOrNameOrTitleOrCaption(item, fieldName)) {\r\n resultItem = item;\r\n return false\r\n }\r\n }))\r\n }\r\n return resultItem\r\n },\r\n _getFieldParts: function(field) {\r\n var fieldName = field;\r\n var separatorIndex = fieldName.indexOf(\".\");\r\n var resultPath = [];\r\n while (-1 !== separatorIndex) {\r\n resultPath.push(fieldName.substr(0, separatorIndex));\r\n fieldName = fieldName.substr(separatorIndex + 1);\r\n separatorIndex = fieldName.indexOf(\".\")\r\n }\r\n return {\r\n fieldName: fieldName,\r\n fieldPath: resultPath.reverse()\r\n }\r\n },\r\n _getItemByFieldPath: function(path, fieldName, item) {\r\n var itemType = item.itemType;\r\n var subItemsField = this._getSubItemField(itemType);\r\n var isItemWithSubItems = \"group\" === itemType || \"tabbed\" === itemType || item.title;\r\n var result;\r\n do {\r\n if (isItemWithSubItems) {\r\n var name = item.name || item.caption || item.title;\r\n var isGroupWithName = isDefined(name);\r\n var nameWithoutSpaces = getTextWithoutSpaces(name);\r\n var pathNode = void 0;\r\n item[subItemsField] = this._generateItemsFromData(item[subItemsField]);\r\n if (isGroupWithName) {\r\n pathNode = path.pop()\r\n }\r\n if (!path.length) {\r\n result = this._getItemByField(fieldName, item[subItemsField]);\r\n if (result) {\r\n break\r\n }\r\n }\r\n if (!isGroupWithName || isGroupWithName && nameWithoutSpaces === pathNode) {\r\n if (path.length) {\r\n result = this._searchItemInEverySubItem(path, fieldName, item[subItemsField])\r\n }\r\n }\r\n } else {\r\n break\r\n }\r\n } while (path.length && !isDefined(result));\r\n return result\r\n },\r\n _getSubItemField: function(itemType) {\r\n return \"tabbed\" === itemType ? \"tabs\" : \"items\"\r\n },\r\n _searchItemInEverySubItem: function(path, fieldName, items) {\r\n var that = this;\r\n var result;\r\n each(items, (function(index, groupItem) {\r\n result = that._getItemByFieldPath(path.slice(), fieldName, groupItem);\r\n if (result) {\r\n return false\r\n }\r\n }));\r\n if (!result) {\r\n result = false\r\n }\r\n return result\r\n },\r\n _changeItemOption: function(item, option, value) {\r\n if (isObject(item)) {\r\n item[option] = value\r\n }\r\n },\r\n _dimensionChanged: function() {\r\n var currentScreenFactor = this._getCurrentScreenFactor();\r\n if (this._lastMarkupScreenFactor !== currentScreenFactor) {\r\n if (this._isColCountChanged(this._lastMarkupScreenFactor, currentScreenFactor)) {\r\n this._targetScreenFactor = currentScreenFactor;\r\n this._refresh();\r\n this._targetScreenFactor = void 0\r\n }\r\n this._lastMarkupScreenFactor = currentScreenFactor\r\n }\r\n },\r\n _isColCountChanged: function(oldScreenSize, newScreenSize) {\r\n var isChanged = false;\r\n each(this._cachedColCountOptions, (function(index, item) {\r\n if (item.colCountByScreen[oldScreenSize] !== item.colCountByScreen[newScreenSize]) {\r\n isChanged = true;\r\n return false\r\n }\r\n }));\r\n return isChanged\r\n },\r\n _refresh: function() {\r\n var editorSelector = \".\" + FOCUSED_STATE_CLASS + \" input, .\" + FOCUSED_STATE_CLASS + \" textarea\";\r\n eventsEngine.trigger(this.$element().find(editorSelector), \"change\");\r\n this.callBase()\r\n },\r\n _resetValues: function() {\r\n this._itemsRunTimeInfo.each((function(_, itemRunTimeInfo) {\r\n if (isDefined(itemRunTimeInfo.widgetInstance) && Editor.isEditor(itemRunTimeInfo.widgetInstance)) {\r\n itemRunTimeInfo.widgetInstance.reset();\r\n itemRunTimeInfo.widgetInstance.option(\"isValid\", true)\r\n }\r\n }));\r\n ValidationEngine.resetGroup(this._getValidationGroup())\r\n },\r\n _updateData: function(data, value, isComplexData) {\r\n var that = this;\r\n var _data = isComplexData ? value : data;\r\n if (isObject(_data)) {\r\n each(_data, (function(dataField, fieldValue) {\r\n that._updateData(isComplexData ? data + \".\" + dataField : dataField, fieldValue, isObject(fieldValue))\r\n }))\r\n } else if (isString(data)) {\r\n that._updateFieldValue(data, value)\r\n }\r\n },\r\n registerKeyHandler: function(key, handler) {\r\n this.callBase(key, handler);\r\n this._itemsRunTimeInfo.each((function(_, itemRunTimeInfo) {\r\n if (isDefined(itemRunTimeInfo.widgetInstance)) {\r\n itemRunTimeInfo.widgetInstance.registerKeyHandler(key, handler)\r\n }\r\n }))\r\n },\r\n _focusTarget: function() {\r\n return this.$element().find(\".\" + FIELD_ITEM_CONTENT_CLASS + \" [tabindex]\").first()\r\n },\r\n _visibilityChanged: function() {},\r\n _clearAutoColCountChangedTimeout: function() {\r\n if (this.autoColCountChangedTimeoutId) {\r\n clearTimeout(this.autoColCountChangedTimeoutId);\r\n this.autoColCountChangedTimeoutId = void 0\r\n }\r\n },\r\n _dispose: function() {\r\n this._clearAutoColCountChangedTimeout();\r\n ValidationEngine.removeGroup(this._getValidationGroup());\r\n this.callBase()\r\n },\r\n resetValues: function() {\r\n this._resetValues()\r\n },\r\n updateData: function(data, value) {\r\n this._updateData(data, value)\r\n },\r\n getEditor: function(dataField) {\r\n return this._itemsRunTimeInfo.findWidgetInstanceByDataField(dataField) || this._itemsRunTimeInfo.findWidgetInstanceByName(dataField)\r\n },\r\n getButton: function(name) {\r\n return this._itemsRunTimeInfo.findWidgetInstanceByName(name)\r\n },\r\n updateDimensions: function() {\r\n var that = this;\r\n var deferred = new Deferred;\r\n if (that._scrollable) {\r\n that._scrollable.update().done((function() {\r\n deferred.resolveWith(that)\r\n }))\r\n } else {\r\n deferred.resolveWith(that)\r\n }\r\n return deferred.promise()\r\n },\r\n itemOption: function(id, option, value) {\r\n var items = this._generateItemsFromData(this.option(\"items\"));\r\n var item = this._getItemByField(id, items);\r\n var path = getItemPath(items, item);\r\n if (!item) {\r\n return\r\n }\r\n switch (arguments.length) {\r\n case 1:\r\n return item;\r\n case 3:\r\n var itemAction = this._tryCreateItemOptionAction(option, item, value, item[option], path);\r\n this._changeItemOption(item, option, value);\r\n var fullName = getFullOptionName(path, option);\r\n if (!this._tryExecuteItemOptionAction(itemAction) && !this._tryChangeLayoutManagerItemOption(fullName, value)) {\r\n this.option(\"items\", items)\r\n }\r\n break;\r\n default:\r\n if (isObject(option)) {\r\n if (!this._tryChangeLayoutManagerItemOptions(path, option)) {\r\n var allowUpdateItems;\r\n each(option, (optionName, optionValue) => {\r\n var itemAction = this._tryCreateItemOptionAction(optionName, item, optionValue, item[optionName], path);\r\n this._changeItemOption(item, optionName, optionValue);\r\n if (!allowUpdateItems && !this._tryExecuteItemOptionAction(itemAction)) {\r\n allowUpdateItems = true\r\n }\r\n });\r\n allowUpdateItems && this.option(\"items\", items)\r\n }\r\n }\r\n }\r\n },\r\n validate: function() {\r\n return ValidationEngine.validateGroup(this._getValidationGroup())\r\n },\r\n getItemID: function(name) {\r\n return \"dx_\" + this.option(\"formID\") + \"_\" + (name || new Guid)\r\n },\r\n getTargetScreenFactor: function() {\r\n return this._targetScreenFactor\r\n }\r\n});\r\nregisterComponent(\"dxForm\", Form);\r\nexport default Form;\r\n","/**\r\n * DevExtreme (esm/ui/form.js)\r\n * Version: 22.1.6\r\n * Build date: Tue Oct 18 2022\r\n *\r\n * Copyright (c) 2012 - 2022 Developer Express Inc. ALL RIGHTS RESERVED\r\n * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/\r\n */\r\nimport Form from \"./form/ui.form\";\r\nexport default Form;\r\n","/**\r\n * DevExtreme (esm/ui/grid_core/ui.grid_core.editing_form_based.js)\r\n * Version: 22.1.6\r\n * Build date: Tue Oct 18 2022\r\n *\r\n * Copyright (c) 2012 - 2022 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 getWindow\r\n} from \"../../core/utils/window\";\r\nimport eventsEngine from \"../../events/core/events_engine\";\r\nimport Guid from \"../../core/guid\";\r\nimport {\r\n isDefined,\r\n isString\r\n} from \"../../core/utils/type\";\r\nimport {\r\n each\r\n} from \"../../core/utils/iterator\";\r\nimport {\r\n extend\r\n} from \"../../core/utils/extend\";\r\nimport Button from \"../button\";\r\nimport devices from \"../../core/devices\";\r\nimport Form from \"../form\";\r\nimport {\r\n Deferred\r\n} from \"../../core/utils/deferred\";\r\nimport {\r\n equalByValue\r\n} from \"../../core/utils/common\";\r\nimport Scrollable from \"../scroll_view/ui.scrollable\";\r\nimport Popup from \"../popup\";\r\nimport {\r\n EDIT_MODE_FORM,\r\n EDIT_MODE_POPUP,\r\n FOCUSABLE_ELEMENT_SELECTOR,\r\n EDITING_EDITROWKEY_OPTION_NAME,\r\n EDITING_POPUP_OPTION_NAME,\r\n DATA_EDIT_DATA_INSERT_TYPE,\r\n EDITING_FORM_OPTION_NAME\r\n} from \"./ui.grid_core.editing_constants\";\r\nvar isRenovatedScrollable = !!Scrollable.IS_RENOVATED_WIDGET;\r\nvar EDIT_FORM_ITEM_CLASS = \"edit-form-item\";\r\nvar EDIT_POPUP_CLASS = \"edit-popup\";\r\nvar EDIT_POPUP_FORM_CLASS = \"edit-popup-form\";\r\nvar FOCUSABLE_ELEMENT_CLASS = isRenovatedScrollable ? \"dx-scrollable\" : \"dx-scrollable-container\";\r\nvar BUTTON_CLASS = \"dx-button\";\r\nvar FORM_BUTTONS_CONTAINER_CLASS = \"form-buttons-container\";\r\nvar getEditorType = item => {\r\n var _column$formItem;\r\n var column = item.column;\r\n return item.isCustomEditorType ? item.editorType : null === (_column$formItem = column.formItem) || void 0 === _column$formItem ? void 0 : _column$formItem.editorType\r\n};\r\nvar forEachFormItems = (items, callBack) => {\r\n items.forEach(item => {\r\n if (item.items || item.tabs) {\r\n forEachFormItems(item.items || item.tabs, callBack)\r\n } else {\r\n callBack(item)\r\n }\r\n })\r\n};\r\nexport var editingFormBasedModule = {\r\n extenders: {\r\n controllers: {\r\n editing: {\r\n init: function() {\r\n this._editForm = null;\r\n this._updateEditFormDeferred = null;\r\n this.callBase.apply(this, arguments)\r\n },\r\n isFormOrPopupEditMode: function() {\r\n return this.isPopupEditMode() || this.isFormEditMode()\r\n },\r\n isPopupEditMode: function() {\r\n var editMode = this.option(\"editing.mode\");\r\n return editMode === EDIT_MODE_POPUP\r\n },\r\n isFormEditMode: function() {\r\n var editMode = this.option(\"editing.mode\");\r\n return editMode === EDIT_MODE_FORM\r\n },\r\n getFirstEditableColumnIndex: function() {\r\n var firstFormItem = this._firstFormItem;\r\n if (this.isFormEditMode() && firstFormItem) {\r\n var editRowKey = this.option(EDITING_EDITROWKEY_OPTION_NAME);\r\n var editRowIndex = this._dataController.getRowIndexByKey(editRowKey);\r\n var $editFormElements = this._rowsView.getCellElements(editRowIndex);\r\n return this._rowsView._getEditFormEditorVisibleIndex($editFormElements, firstFormItem.column)\r\n }\r\n return this.callBase.apply(this, arguments)\r\n },\r\n getEditFormRowIndex: function() {\r\n return this.isFormOrPopupEditMode() ? this._getVisibleEditRowIndex() : this.callBase.apply(this, arguments)\r\n },\r\n _isEditColumnVisible: function() {\r\n var result = this.callBase.apply(this, arguments);\r\n var editingOptions = this.option(\"editing\");\r\n return this.isFormOrPopupEditMode() ? editingOptions.allowUpdating || result : result\r\n },\r\n _handleDataChanged: function(args) {\r\n if (this.isPopupEditMode()) {\r\n var _args$items, _args$changeTypes;\r\n var editRowKey = this.option(\"editing.editRowKey\");\r\n var hasEditRow = null === args || void 0 === args ? void 0 : null === (_args$items = args.items) || void 0 === _args$items ? void 0 : _args$items.some(item => equalByValue(item.key, editRowKey));\r\n var onlyInsertChanges = (null === (_args$changeTypes = args.changeTypes) || void 0 === _args$changeTypes ? void 0 : _args$changeTypes.length) && args.changeTypes.every(item => \"insert\" === item);\r\n if ((\"refresh\" === args.changeType || hasEditRow) && !onlyInsertChanges) {\r\n this._repaintEditPopup()\r\n }\r\n }\r\n this.callBase.apply(this, arguments)\r\n },\r\n getPopupContent: function() {\r\n var _this$_editPopup;\r\n var popupVisible = null === (_this$_editPopup = this._editPopup) || void 0 === _this$_editPopup ? void 0 : _this$_editPopup.option(\"visible\");\r\n if (this.isPopupEditMode() && popupVisible) {\r\n return this._$popupContent\r\n }\r\n },\r\n _showAddedRow: function(rowIndex) {\r\n if (this.isPopupEditMode()) {\r\n this._showEditPopup(rowIndex)\r\n } else {\r\n this.callBase.apply(this, arguments)\r\n }\r\n },\r\n _cancelEditDataCore: function() {\r\n this.callBase.apply(this, arguments);\r\n if (this.isPopupEditMode()) {\r\n this._hideEditPopup()\r\n }\r\n },\r\n _updateEditRowCore: function(row, skipCurrentRow, isCustomSetCellValue) {\r\n var editForm = this._editForm;\r\n if (this.isPopupEditMode()) {\r\n if (this.option(\"repaintChangesOnly\")) {\r\n var _row$update;\r\n null === (_row$update = row.update) || void 0 === _row$update ? void 0 : _row$update.call(row, row);\r\n this._rowsView.renderDelayedTemplates()\r\n } else if (editForm) {\r\n this._updateEditFormDeferred = (new Deferred).done(() => editForm.repaint());\r\n if (!this._updateLockCount) {\r\n this._updateEditFormDeferred.resolve()\r\n }\r\n }\r\n } else {\r\n this.callBase.apply(this, arguments)\r\n }\r\n },\r\n _showEditPopup: function(rowIndex, repaintForm) {\r\n var isMobileDevice = \"desktop\" !== devices.current().deviceType;\r\n var popupOptions = extend({\r\n showTitle: false,\r\n fullScreen: isMobileDevice,\r\n copyRootClassesToWrapper: true,\r\n _ignoreCopyRootClassesToWrapperDeprecation: true,\r\n toolbarItems: [{\r\n toolbar: \"bottom\",\r\n location: \"after\",\r\n widget: \"dxButton\",\r\n options: this._getSaveButtonConfig()\r\n }, {\r\n toolbar: \"bottom\",\r\n location: \"after\",\r\n widget: \"dxButton\",\r\n options: this._getCancelButtonConfig()\r\n }],\r\n contentTemplate: this._getPopupEditFormTemplate(rowIndex)\r\n }, this.option(EDITING_POPUP_OPTION_NAME));\r\n if (!this._editPopup) {\r\n var $popupContainer = $(\"
\").appendTo(this.component.$element()).addClass(this.addWidgetPrefix(EDIT_POPUP_CLASS));\r\n this._editPopup = this._createComponent($popupContainer, Popup, {\r\n copyRootClassesToWrapper: true,\r\n _ignoreCopyRootClassesToWrapperDeprecation: true\r\n });\r\n this._editPopup.on(\"hiding\", this._getEditPopupHiddenHandler());\r\n this._editPopup.on(\"shown\", e => {\r\n eventsEngine.trigger(e.component.$content().find(FOCUSABLE_ELEMENT_SELECTOR).not(\".\".concat(FOCUSABLE_ELEMENT_CLASS)).first(), \"focus\");\r\n if (repaintForm) {\r\n var _this$_editForm;\r\n null === (_this$_editForm = this._editForm) || void 0 === _this$_editForm ? void 0 : _this$_editForm.repaint()\r\n }\r\n })\r\n }\r\n this._editPopup.option(popupOptions);\r\n this._editPopup.show();\r\n this.callBase.apply(this, arguments)\r\n },\r\n _getPopupEditFormTemplate: function(rowIndex) {\r\n var row = this.component.getVisibleRows()[rowIndex];\r\n var templateOptions = {\r\n row: row,\r\n values: row.values,\r\n rowType: row.rowType,\r\n key: row.key,\r\n rowIndex: rowIndex\r\n };\r\n this._rowsView._addWatchMethod(templateOptions, row);\r\n return container => {\r\n var formTemplate = this.getEditFormTemplate();\r\n var scrollable = this._createComponent($(\"
\").appendTo(container), Scrollable);\r\n this._$popupContent = $(scrollable.content());\r\n formTemplate(this._$popupContent, templateOptions, {\r\n isPopupForm: true\r\n });\r\n this._rowsView.renderDelayedTemplates()\r\n }\r\n },\r\n _repaintEditPopup: function() {\r\n var rowIndex = this._getVisibleEditRowIndex();\r\n if (rowIndex >= 0) {\r\n var _this$_editPopup2, _this$_editPopup3;\r\n var defaultAnimation = null === (_this$_editPopup2 = this._editPopup) || void 0 === _this$_editPopup2 ? void 0 : _this$_editPopup2.option(\"animation\");\r\n null === (_this$_editPopup3 = this._editPopup) || void 0 === _this$_editPopup3 ? void 0 : _this$_editPopup3.option(\"animation\", null);\r\n this._showEditPopup(rowIndex, true);\r\n if (void 0 !== defaultAnimation) {\r\n this._editPopup.option(\"animation\", defaultAnimation)\r\n }\r\n }\r\n },\r\n _hideEditPopup: function() {\r\n var _this$_editPopup4;\r\n null === (_this$_editPopup4 = this._editPopup) || void 0 === _this$_editPopup4 ? void 0 : _this$_editPopup4.option(\"visible\", false)\r\n },\r\n optionChanged: function(args) {\r\n if (\"editing\" === args.name && this.isFormOrPopupEditMode()) {\r\n var fullName = args.fullName;\r\n if (0 === fullName.indexOf(EDITING_FORM_OPTION_NAME)) {\r\n this._handleFormOptionChange(args);\r\n args.handled = true\r\n } else if (0 === fullName.indexOf(EDITING_POPUP_OPTION_NAME)) {\r\n this._handlePopupOptionChange(args);\r\n args.handled = true\r\n }\r\n }\r\n this.callBase.apply(this, arguments)\r\n },\r\n _handleFormOptionChange: function(args) {\r\n var _this$_editPopup5;\r\n if (this.isFormEditMode()) {\r\n var editRowIndex = this._getVisibleEditRowIndex();\r\n if (editRowIndex >= 0) {\r\n this._dataController.updateItems({\r\n changeType: \"update\",\r\n rowIndices: [editRowIndex]\r\n })\r\n }\r\n } else if (null !== (_this$_editPopup5 = this._editPopup) && void 0 !== _this$_editPopup5 && _this$_editPopup5.option(\"visible\") && 0 === args.fullName.indexOf(EDITING_FORM_OPTION_NAME)) {\r\n this._repaintEditPopup()\r\n }\r\n },\r\n _handlePopupOptionChange: function(args) {\r\n var editPopup = this._editPopup;\r\n if (editPopup) {\r\n var popupOptionName = args.fullName.slice(EDITING_POPUP_OPTION_NAME.length + 1);\r\n if (popupOptionName) {\r\n editPopup.option(popupOptionName, args.value)\r\n } else {\r\n editPopup.option(args.value)\r\n }\r\n }\r\n },\r\n renderFormEditTemplate: function(detailCellOptions, item, formTemplateOptions, container, isReadOnly) {\r\n var that = this;\r\n var $container = $(container);\r\n var column = item.column;\r\n var editorType = getEditorType(item);\r\n var rowData = null === detailCellOptions || void 0 === detailCellOptions ? void 0 : detailCellOptions.row.data;\r\n var form = formTemplateOptions.component;\r\n var {\r\n label: label,\r\n labelMark: labelMark,\r\n labelMode: labelMode\r\n } = formTemplateOptions.editorOptions || {};\r\n var cellOptions = extend({}, detailCellOptions, {\r\n data: rowData,\r\n cellElement: null,\r\n isOnForm: true,\r\n item: item,\r\n id: form.getItemID(item.name || item.dataField),\r\n column: extend({}, column, {\r\n editorType: editorType,\r\n editorOptions: extend({\r\n label: label,\r\n labelMark: labelMark,\r\n labelMode: labelMode\r\n }, column.editorOptions, item.editorOptions)\r\n }),\r\n columnIndex: column.index,\r\n setValue: !isReadOnly && column.allowEditing && function(value) {\r\n that.updateFieldValue(cellOptions, value)\r\n }\r\n });\r\n cellOptions.value = column.calculateCellValue(rowData);\r\n var template = this._getFormEditItemTemplate.bind(this)(cellOptions, column);\r\n this._rowsView.renderTemplate($container, template, cellOptions, !!$container.closest(getWindow().document).length).done(() => {\r\n this._rowsView._updateCell($container, cellOptions)\r\n });\r\n return cellOptions\r\n },\r\n getFormEditorTemplate: function(cellOptions, item) {\r\n var column = this.component.columnOption(item.dataField);\r\n return (options, container) => {\r\n var _cellOptions$row$watc, _cellOptions$row;\r\n var $container = $(container);\r\n null === (_cellOptions$row$watc = (_cellOptions$row = cellOptions.row).watch) || void 0 === _cellOptions$row$watc ? void 0 : _cellOptions$row$watc.call(_cellOptions$row, (function() {\r\n return column.selector(cellOptions.row.data)\r\n }), () => {\r\n var _validator;\r\n var $editorElement = $container.find(\".dx-widget\").first();\r\n var validator = $editorElement.data(\"dxValidator\");\r\n var validatorOptions = null === (_validator = validator) || void 0 === _validator ? void 0 : _validator.option();\r\n $container.contents().remove();\r\n cellOptions = this.renderFormEditTemplate.bind(this)(cellOptions, item, options, $container);\r\n $editorElement = $container.find(\".dx-widget\").first();\r\n validator = $editorElement.data(\"dxValidator\");\r\n if (validatorOptions && !validator) {\r\n $editorElement.dxValidator({\r\n validationRules: validatorOptions.validationRules,\r\n validationGroup: validatorOptions.validationGroup,\r\n dataGetter: validatorOptions.dataGetter\r\n })\r\n }\r\n });\r\n cellOptions = this.renderFormEditTemplate.bind(this)(cellOptions, item, options, $container)\r\n }\r\n },\r\n getEditFormOptions: function(detailOptions) {\r\n var _this$_getValidationG;\r\n var editFormOptions = null === (_this$_getValidationG = this._getValidationGroupsInForm) || void 0 === _this$_getValidationG ? void 0 : _this$_getValidationG.call(this, detailOptions);\r\n var userCustomizeItem = this.option(\"editing.form.customizeItem\");\r\n var editFormItemClass = this.addWidgetPrefix(EDIT_FORM_ITEM_CLASS);\r\n var items = this.option(\"editing.form.items\");\r\n var isCustomEditorType = {};\r\n if (!items) {\r\n var columns = this.getController(\"columns\").getColumns();\r\n items = [];\r\n each(columns, (function(_, column) {\r\n if (!column.isBand && !column.type) {\r\n items.push({\r\n column: column,\r\n name: column.name,\r\n dataField: column.dataField\r\n })\r\n }\r\n }))\r\n } else {\r\n forEachFormItems(items, item => {\r\n var itemId = (null === item || void 0 === item ? void 0 : item.name) || (null === item || void 0 === item ? void 0 : item.dataField);\r\n if (itemId) {\r\n isCustomEditorType[itemId] = !!item.editorType\r\n }\r\n })\r\n }\r\n return extend({}, editFormOptions, {\r\n items: items,\r\n formID: \"dx-\" + new Guid,\r\n customizeItem: item => {\r\n var column;\r\n var itemId = item.name || item.dataField;\r\n if (item.column || itemId) {\r\n column = item.column || this._columnsController.columnOption(item.name ? \"name:\" + item.name : \"dataField:\" + item.dataField)\r\n }\r\n if (column) {\r\n item.label = item.label || {};\r\n item.label.text = item.label.text || column.caption;\r\n if (\"boolean\" === column.dataType && void 0 === item.label.visible) {\r\n var labelMode = this.option(\"editing.form.labelMode\");\r\n if (\"floating\" === labelMode || \"static\" === labelMode) {\r\n item.label.visible = true\r\n }\r\n }\r\n item.template = item.template || this.getFormEditorTemplate(detailOptions, item);\r\n item.column = column;\r\n item.isCustomEditorType = isCustomEditorType[itemId];\r\n if (column.formItem) {\r\n extend(item, column.formItem)\r\n }\r\n if (void 0 === item.isRequired && column.validationRules) {\r\n item.isRequired = column.validationRules.some((function(rule) {\r\n return \"required\" === rule.type\r\n }));\r\n item.validationRules = []\r\n }\r\n var itemVisible = isDefined(item.visible) ? item.visible : true;\r\n if (!this._firstFormItem && itemVisible) {\r\n this._firstFormItem = item\r\n }\r\n }\r\n null === userCustomizeItem || void 0 === userCustomizeItem ? void 0 : userCustomizeItem.call(this, item);\r\n item.cssClass = isString(item.cssClass) ? item.cssClass + \" \" + editFormItemClass : editFormItemClass\r\n }\r\n })\r\n },\r\n getEditFormTemplate: function() {\r\n return ($container, detailOptions, options) => {\r\n var editFormOptions = this.option(EDITING_FORM_OPTION_NAME);\r\n var baseEditFormOptions = this.getEditFormOptions(detailOptions);\r\n var $formContainer = $(\"
\").appendTo($container);\r\n var isPopupForm = null === options || void 0 === options ? void 0 : options.isPopupForm;\r\n this._firstFormItem = void 0;\r\n if (isPopupForm) {\r\n $formContainer.addClass(this.addWidgetPrefix(EDIT_POPUP_FORM_CLASS))\r\n }\r\n this._editForm = this._createComponent($formContainer, Form, extend({}, editFormOptions, baseEditFormOptions));\r\n if (!isPopupForm) {\r\n var $buttonsContainer = $(\"
\").addClass(this.addWidgetPrefix(FORM_BUTTONS_CONTAINER_CLASS)).appendTo($container);\r\n this._createComponent($(\"
\").appendTo($buttonsContainer), Button, this._getSaveButtonConfig());\r\n this._createComponent($(\"
\").appendTo($buttonsContainer), Button, this._getCancelButtonConfig())\r\n }\r\n this._editForm.on(\"contentReady\", () => {\r\n var _this$_editPopup6;\r\n this._rowsView.renderDelayedTemplates();\r\n null === (_this$_editPopup6 = this._editPopup) || void 0 === _this$_editPopup6 ? void 0 : _this$_editPopup6.repaint()\r\n })\r\n }\r\n },\r\n getEditForm: function() {\r\n return this._editForm\r\n },\r\n _endUpdateCore: function() {\r\n var _this$_updateEditForm;\r\n null === (_this$_updateEditForm = this._updateEditFormDeferred) || void 0 === _this$_updateEditForm ? void 0 : _this$_updateEditForm.resolve()\r\n },\r\n _beforeEndSaving: function() {\r\n this.callBase.apply(this, arguments);\r\n if (this.isPopupEditMode()) {\r\n var _this$_editPopup7;\r\n null === (_this$_editPopup7 = this._editPopup) || void 0 === _this$_editPopup7 ? void 0 : _this$_editPopup7.hide()\r\n }\r\n },\r\n _processDataItemCore: function(item, _ref) {\r\n var {\r\n type: type\r\n } = _ref;\r\n if (this.isPopupEditMode() && type === DATA_EDIT_DATA_INSERT_TYPE) {\r\n item.visible = false\r\n }\r\n this.callBase.apply(this, arguments)\r\n },\r\n _editRowFromOptionChangedCore: function(rowIndices, rowIndex) {\r\n var isPopupEditMode = this.isPopupEditMode();\r\n this.callBase(rowIndices, rowIndex, isPopupEditMode);\r\n if (isPopupEditMode) {\r\n this._showEditPopup(rowIndex)\r\n }\r\n }\r\n },\r\n data: {\r\n _updateEditItem: function(item) {\r\n if (this._editingController.isFormEditMode()) {\r\n item.rowType = \"detail\"\r\n }\r\n },\r\n _getChangedColumnIndices: function(oldItem, newItem, visibleRowIndex, isLiveUpdate) {\r\n if (false === isLiveUpdate && newItem.isEditing && this._editingController.isFormEditMode()) {\r\n return\r\n }\r\n return this.callBase.apply(this, arguments)\r\n }\r\n }\r\n },\r\n views: {\r\n rowsView: {\r\n _renderCellContent: function($cell, options) {\r\n if (\"data\" === options.rowType && this._editingController.isPopupEditMode() && false === options.row.visible) {\r\n return\r\n }\r\n this.callBase.apply(this, arguments)\r\n },\r\n getCellElements: function(rowIndex) {\r\n var $cellElements = this.callBase(rowIndex);\r\n var editingController = this._editingController;\r\n var editForm = editingController.getEditForm();\r\n var editFormRowIndex = editingController.getEditFormRowIndex();\r\n if (editFormRowIndex === rowIndex && $cellElements && editForm) {\r\n return editForm.$element().find(\".\" + this.addWidgetPrefix(EDIT_FORM_ITEM_CLASS) + \", .\" + BUTTON_CLASS)\r\n }\r\n return $cellElements\r\n },\r\n _getVisibleColumnIndex: function($cells, rowIndex, columnIdentifier) {\r\n var editFormRowIndex = this._editingController.getEditFormRowIndex();\r\n if (editFormRowIndex === rowIndex && isString(columnIdentifier)) {\r\n var column = this._columnsController.columnOption(columnIdentifier);\r\n return this._getEditFormEditorVisibleIndex($cells, column)\r\n }\r\n return this.callBase.apply(this, arguments)\r\n },\r\n _getEditFormEditorVisibleIndex: function($cells, column) {\r\n var visibleIndex = -1;\r\n each($cells, (function(index, cellElement) {\r\n var item = $(cellElement).find(\".dx-field-item-content\").data(\"dx-form-item\");\r\n if (null !== item && void 0 !== item && item.column && column && item.column.index === column.index) {\r\n visibleIndex = index;\r\n return false\r\n }\r\n }));\r\n return visibleIndex\r\n },\r\n _isFormItem: function(parameters) {\r\n var isDetailRow = \"detail\" === parameters.rowType || \"detailAdaptive\" === parameters.rowType;\r\n var isPopupEditing = \"data\" === parameters.rowType && this._editingController.isPopupEditMode();\r\n return (isDetailRow || isPopupEditing) && parameters.item\r\n },\r\n _updateCell: function($cell, parameters) {\r\n if (this._isFormItem(parameters)) {\r\n this._formItemPrepared(parameters, $cell)\r\n } else {\r\n this.callBase($cell, parameters)\r\n }\r\n }\r\n }\r\n }\r\n }\r\n};\r\n","/**\r\n * DevExtreme (esm/ui/data_grid/ui.data_grid.editing_form_based.js)\r\n * Version: 22.1.6\r\n * Build date: Tue Oct 18 2022\r\n *\r\n * Copyright (c) 2012 - 2022 Developer Express Inc. ALL RIGHTS RESERVED\r\n * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/\r\n */\r\nimport gridCore from \"./ui.data_grid.core\";\r\nimport {\r\n editingFormBasedModule\r\n} from \"../grid_core/ui.grid_core.editing_form_based\";\r\ngridCore.registerModule(\"editingFormBased\", editingFormBasedModule);\r\n","/**\r\n * DevExtreme (esm/ui/grid_core/ui.grid_core.editing_cell_based.js)\r\n * Version: 22.1.6\r\n * Build date: Tue Oct 18 2022\r\n *\r\n * Copyright (c) 2012 - 2022 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 domAdapter from \"../../core/dom_adapter\";\r\nimport {\r\n getWindow\r\n} from \"../../core/utils/window\";\r\nimport eventsEngine from \"../../events/core/events_engine\";\r\nimport {\r\n isDefined,\r\n isString\r\n} from \"../../core/utils/type\";\r\nimport {\r\n name as clickEventName\r\n} from \"../../events/click\";\r\nimport pointerEvents from \"../../events/pointer\";\r\nimport {\r\n addNamespace\r\n} from \"../../events/utils/index\";\r\nimport holdEvent from \"../../events/hold\";\r\nimport {\r\n when,\r\n Deferred\r\n} from \"../../core/utils/deferred\";\r\nimport {\r\n deferRender\r\n} from \"../../core/utils/common\";\r\nimport {\r\n createObjectWithChanges\r\n} from \"../../data/array_utils\";\r\nimport {\r\n EDIT_MODE_BATCH,\r\n EDIT_MODE_CELL,\r\n TARGET_COMPONENT_NAME\r\n} from \"./ui.grid_core.editing_constants\";\r\nvar FOCUS_OVERLAY_CLASS = \"focus-overlay\";\r\nvar ADD_ROW_BUTTON_CLASS = \"addrow-button\";\r\nvar DROPDOWN_EDITOR_OVERLAY_CLASS = \"dx-dropdowneditor-overlay\";\r\nvar EDITOR_CELL_CLASS = \"dx-editor-cell\";\r\nvar ROW_CLASS = \"dx-row\";\r\nvar CELL_MODIFIED_CLASS = \"dx-cell-modified\";\r\nvar DATA_ROW_CLASS = \"dx-data-row\";\r\nvar ROW_REMOVED = \"dx-row-removed\";\r\nvar EDITING_EDITROWKEY_OPTION_NAME = \"editing.editRowKey\";\r\nvar EDITING_EDITCOLUMNNAME_OPTION_NAME = \"editing.editColumnName\";\r\nvar DATA_EDIT_DATA_REMOVE_TYPE = \"remove\";\r\nexport default {\r\n extenders: {\r\n controllers: {\r\n editing: {\r\n init: function() {\r\n var needCreateHandlers = !this._saveEditorHandler;\r\n this.callBase.apply(this, arguments);\r\n if (needCreateHandlers) {\r\n var $pointerDownTarget;\r\n var isResizing;\r\n this._pointerUpEditorHandler = () => {\r\n var _this$getController;\r\n isResizing = null === (_this$getController = this.getController(\"columnsResizer\")) || void 0 === _this$getController ? void 0 : _this$getController.isResizing()\r\n };\r\n this._pointerDownEditorHandler = e => $pointerDownTarget = $(e.target);\r\n this._saveEditorHandler = this.createAction((function(e) {\r\n var event = e.event;\r\n var $target = $(event.target);\r\n var targetComponent = event[TARGET_COMPONENT_NAME];\r\n var component = this.component;\r\n if ($pointerDownTarget && $pointerDownTarget.is(\"input\") && !$pointerDownTarget.is($target)) {\r\n return\r\n }\r\n\r\n function checkEditorPopup($element) {\r\n if (!$element) {\r\n return false\r\n }\r\n var $dropDownEditorOverlay = $element.closest(\".\".concat(DROPDOWN_EDITOR_OVERLAY_CLASS));\r\n var $componentElement = component.$element();\r\n return $dropDownEditorOverlay.length > 0 && 0 === $componentElement.closest($dropDownEditorOverlay).length\r\n }\r\n if (this.isCellOrBatchEditMode() && !this._editCellInProgress) {\r\n var isEditorPopup = checkEditorPopup($target) || checkEditorPopup(null === targetComponent || void 0 === targetComponent ? void 0 : targetComponent.$element());\r\n var isDomElement = !!$target.closest(getWindow().document).length;\r\n var isAnotherComponent = targetComponent && !targetComponent._disposed && targetComponent !== this.component;\r\n var isAddRowButton = !!$target.closest(\".\".concat(this.addWidgetPrefix(ADD_ROW_BUTTON_CLASS))).length;\r\n var isFocusOverlay = $target.hasClass(this.addWidgetPrefix(FOCUS_OVERLAY_CLASS));\r\n var isCellEditMode = this.isCellEditMode();\r\n if (!isResizing && !isEditorPopup && !isFocusOverlay && !(isAddRowButton && isCellEditMode && this.isEditing()) && (isDomElement || isAnotherComponent)) {\r\n this._closeEditItem.bind(this)($target)\r\n }\r\n }\r\n }));\r\n eventsEngine.on(domAdapter.getDocument(), pointerEvents.up, this._pointerUpEditorHandler);\r\n eventsEngine.on(domAdapter.getDocument(), pointerEvents.down, this._pointerDownEditorHandler);\r\n eventsEngine.on(domAdapter.getDocument(), clickEventName, this._saveEditorHandler)\r\n }\r\n },\r\n isCellEditMode: function() {\r\n return this.option(\"editing.mode\") === EDIT_MODE_CELL\r\n },\r\n isBatchEditMode: function() {\r\n return this.option(\"editing.mode\") === EDIT_MODE_BATCH\r\n },\r\n isCellOrBatchEditMode: function() {\r\n return this.isCellEditMode() || this.isBatchEditMode()\r\n },\r\n _needToCloseEditableCell: function($targetElement) {\r\n var $element = this.component.$element();\r\n var result = this.isEditing();\r\n var isCurrentComponentElement = !$element || !!$targetElement.closest($element).length;\r\n if (isCurrentComponentElement) {\r\n var isDataRow = $targetElement.closest(\".\" + DATA_ROW_CLASS).length;\r\n if (isDataRow) {\r\n var rowsView = this.getView(\"rowsView\");\r\n var $targetCell = $targetElement.closest(\".\" + ROW_CLASS + \"> td\");\r\n var rowIndex = rowsView.getRowIndex($targetCell.parent());\r\n var columnIndex = rowsView.getCellElements(rowIndex).index($targetCell);\r\n var visibleColumns = this._columnsController.getVisibleColumns();\r\n var allowEditing = visibleColumns[columnIndex] && visibleColumns[columnIndex].allowEditing;\r\n result = result && !allowEditing && !this.isEditCell(rowIndex, columnIndex)\r\n }\r\n }\r\n return result || this.callBase.apply(this, arguments)\r\n },\r\n _closeEditItem: function($targetElement) {\r\n if (this._needToCloseEditableCell($targetElement)) {\r\n this.closeEditCell()\r\n }\r\n },\r\n _focusEditorIfNeed: function() {\r\n if (this._needFocusEditor && this.isCellOrBatchEditMode()) {\r\n var _this$_rowsView;\r\n var editColumnIndex = this._getVisibleEditColumnIndex();\r\n var $cell = null === (_this$_rowsView = this._rowsView) || void 0 === _this$_rowsView ? void 0 : _this$_rowsView._getCellElement(this._getVisibleEditRowIndex(), editColumnIndex);\r\n if ($cell && !$cell.find(\":focus\").length) {\r\n this._focusEditingCell(() => {\r\n this._editCellInProgress = false\r\n }, $cell, true)\r\n } else {\r\n this._editCellInProgress = false\r\n }\r\n this._needFocusEditor = false\r\n } else {\r\n this.callBase.apply(this, arguments)\r\n }\r\n },\r\n isEditing: function() {\r\n if (this.isCellOrBatchEditMode()) {\r\n var isEditRowKeyDefined = isDefined(this.option(EDITING_EDITROWKEY_OPTION_NAME));\r\n var isEditColumnNameDefined = isDefined(this.option(EDITING_EDITCOLUMNNAME_OPTION_NAME));\r\n return isEditRowKeyDefined && isEditColumnNameDefined\r\n }\r\n return this.callBase.apply(this, arguments)\r\n },\r\n _handleEditColumnNameChange: function(args) {\r\n var oldRowIndex = this._getVisibleEditRowIndex(args.previousValue);\r\n if (this.isCellOrBatchEditMode() && -1 !== oldRowIndex && isDefined(args.value) && args.value !== args.previousValue) {\r\n var columnIndex = this._columnsController.getVisibleColumnIndex(args.value);\r\n var oldColumnIndex = this._columnsController.getVisibleColumnIndex(args.previousValue);\r\n this._editCellFromOptionChanged(columnIndex, oldColumnIndex, oldRowIndex)\r\n }\r\n },\r\n _addRow: function(parentKey, deferred) {\r\n if (this.isCellEditMode() && this.hasChanges()) {\r\n var _deferred = new Deferred;\r\n this.saveEditData().done(() => {\r\n if (!this.hasChanges()) {\r\n this.addRow(parentKey).done(_deferred.resolve).fail(_deferred.reject)\r\n } else {\r\n _deferred.reject(\"cancel\")\r\n }\r\n });\r\n return _deferred.promise()\r\n }\r\n return this.callBase.apply(this, arguments)\r\n },\r\n editCell: function(rowIndex, columnIndex) {\r\n return this._editCell({\r\n rowIndex: rowIndex,\r\n columnIndex: columnIndex\r\n })\r\n },\r\n _editCell: function(options) {\r\n var d = new Deferred;\r\n var coreResult;\r\n this.executeOperation(d, () => {\r\n coreResult = this._editCellCore(options);\r\n when(coreResult).done(d.resolve).fail(d.reject)\r\n });\r\n return void 0 !== coreResult ? coreResult : d.promise()\r\n },\r\n _editCellCore: function(options) {\r\n var dataController = this._dataController;\r\n var isEditByOptionChanged = isDefined(options.oldColumnIndex) || isDefined(options.oldRowIndex);\r\n var {\r\n columnIndex: columnIndex,\r\n rowIndex: rowIndex,\r\n column: column,\r\n item: item\r\n } = this._getNormalizedEditCellOptions(options);\r\n var params = {\r\n data: null === item || void 0 === item ? void 0 : item.data,\r\n cancel: false,\r\n column: column\r\n };\r\n if (void 0 === item.key) {\r\n this._dataController.fireError(\"E1043\");\r\n return\r\n }\r\n if (column && (\"data\" === item.rowType || \"detailAdaptive\" === item.rowType) && !item.removed && this.isCellOrBatchEditMode()) {\r\n if (!isEditByOptionChanged && this.isEditCell(rowIndex, columnIndex)) {\r\n return true\r\n }\r\n var editRowIndex = rowIndex + dataController.getRowIndexOffset();\r\n return when(this._beforeEditCell(rowIndex, columnIndex, item)).done(cancel => {\r\n if (cancel) {\r\n return\r\n }\r\n if (!this._prepareEditCell(params, item, columnIndex, editRowIndex)) {\r\n this._processCanceledEditingCell()\r\n }\r\n })\r\n }\r\n return false\r\n },\r\n _beforeEditCell: function(rowIndex, columnIndex, item) {\r\n if (this.isCellEditMode() && !item.isNewRow && this.hasChanges()) {\r\n var d = new Deferred;\r\n this.saveEditData().always(() => {\r\n d.resolve(this.hasChanges())\r\n });\r\n return d\r\n }\r\n },\r\n publicMethods: function() {\r\n var publicMethods = this.callBase.apply(this, arguments);\r\n return publicMethods.concat([\"editCell\", \"closeEditCell\"])\r\n },\r\n _getNormalizedEditCellOptions: function(_ref) {\r\n var {\r\n oldColumnIndex: oldColumnIndex,\r\n oldRowIndex: oldRowIndex,\r\n columnIndex: columnIndex,\r\n rowIndex: rowIndex\r\n } = _ref;\r\n var columnsController = this._columnsController;\r\n var visibleColumns = columnsController.getVisibleColumns();\r\n var items = this._dataController.items();\r\n var item = items[rowIndex];\r\n var oldColumn;\r\n if (isDefined(oldColumnIndex)) {\r\n oldColumn = visibleColumns[oldColumnIndex]\r\n } else {\r\n oldColumn = this._getEditColumn()\r\n }\r\n if (!isDefined(oldRowIndex)) {\r\n oldRowIndex = this._getVisibleEditRowIndex()\r\n }\r\n if (isString(columnIndex)) {\r\n columnIndex = columnsController.columnOption(columnIndex, \"index\");\r\n columnIndex = columnsController.getVisibleIndex(columnIndex)\r\n }\r\n var column = visibleColumns[columnIndex];\r\n return {\r\n oldColumn: oldColumn,\r\n columnIndex: columnIndex,\r\n oldRowIndex: oldRowIndex,\r\n rowIndex: rowIndex,\r\n column: column,\r\n item: item\r\n }\r\n },\r\n _prepareEditCell: function(params, item, editColumnIndex, editRowIndex) {\r\n if (!item.isNewRow) {\r\n params.key = item.key\r\n }\r\n if (this._isEditingStart(params)) {\r\n return false\r\n }\r\n this._pageIndex = this._dataController.pageIndex();\r\n this._setEditRowKey(item.key);\r\n this._setEditColumnNameByIndex(editColumnIndex);\r\n if (!params.column.showEditorAlways) {\r\n var _item$oldData;\r\n this._addInternalData({\r\n key: item.key,\r\n oldData: null !== (_item$oldData = item.oldData) && void 0 !== _item$oldData ? _item$oldData : item.data\r\n })\r\n }\r\n return true\r\n },\r\n closeEditCell: function(isError, withoutSaveEditData) {\r\n var result = when();\r\n var oldEditRowIndex = this._getVisibleEditRowIndex();\r\n if (this.isCellOrBatchEditMode()) {\r\n var deferred = new Deferred;\r\n result = new Deferred;\r\n this.executeOperation(deferred, () => {\r\n this._closeEditCellCore(isError, oldEditRowIndex, withoutSaveEditData).always(result.resolve)\r\n })\r\n }\r\n return result.promise()\r\n },\r\n _closeEditCellCore: function(isError, oldEditRowIndex, withoutSaveEditData) {\r\n var dataController = this._dataController;\r\n var deferred = new Deferred;\r\n var promise = deferred.promise();\r\n if (this.isCellEditMode() && this.hasChanges()) {\r\n if (!withoutSaveEditData) {\r\n this.saveEditData().done(error => {\r\n if (!this.hasChanges()) {\r\n this.closeEditCell(!!error).always(deferred.resolve);\r\n return\r\n }\r\n deferred.resolve()\r\n });\r\n return promise\r\n }\r\n } else {\r\n this._resetEditRowKey();\r\n this._resetEditColumnName();\r\n if (oldEditRowIndex >= 0) {\r\n var rowIndices = [oldEditRowIndex];\r\n this._beforeCloseEditCellInBatchMode(rowIndices);\r\n if (!isError) {\r\n dataController.updateItems({\r\n changeType: \"update\",\r\n rowIndices: rowIndices\r\n })\r\n }\r\n }\r\n }\r\n deferred.resolve();\r\n return promise\r\n },\r\n _resetModifiedClassCells: function(changes) {\r\n if (this.isBatchEditMode()) {\r\n var columnsCount = this._columnsController.getVisibleColumns().length;\r\n changes.forEach(_ref2 => {\r\n var {\r\n key: key\r\n } = _ref2;\r\n var rowIndex = this._dataController.getRowIndexByKey(key);\r\n if (-1 !== rowIndex) {\r\n for (var columnIndex = 0; columnIndex < columnsCount; columnIndex++) {\r\n this._rowsView._getCellElement(rowIndex, columnIndex).removeClass(CELL_MODIFIED_CLASS)\r\n }\r\n }\r\n })\r\n }\r\n },\r\n _prepareChange: function(options, value, text) {\r\n var $cellElement = $(options.cellElement);\r\n if (this.isBatchEditMode() && void 0 !== options.key) {\r\n this._applyModified($cellElement, options)\r\n }\r\n return this.callBase.apply(this, arguments)\r\n },\r\n _cancelSaving: function() {\r\n var dataController = this._dataController;\r\n if (this.isCellOrBatchEditMode()) {\r\n if (this.isBatchEditMode()) {\r\n this._resetEditIndices()\r\n }\r\n dataController.updateItems()\r\n }\r\n this.callBase.apply(this, arguments)\r\n },\r\n optionChanged: function(args) {\r\n var fullName = args.fullName;\r\n if (\"editing\" === args.name && fullName === EDITING_EDITCOLUMNNAME_OPTION_NAME) {\r\n this._handleEditColumnNameChange(args);\r\n args.handled = true\r\n } else {\r\n this.callBase(args)\r\n }\r\n },\r\n _editCellFromOptionChanged: function(columnIndex, oldColumnIndex, oldRowIndex) {\r\n var columns = this._columnsController.getVisibleColumns();\r\n if (columnIndex > -1) {\r\n deferRender(() => {\r\n this._repaintEditCell(columns[columnIndex], columns[oldColumnIndex], oldRowIndex)\r\n })\r\n }\r\n },\r\n _handleEditRowKeyChange: function(args) {\r\n if (this.isCellOrBatchEditMode()) {\r\n var columnIndex = this._getVisibleEditColumnIndex();\r\n var oldRowIndexCorrection = this._getEditRowIndexCorrection();\r\n var oldRowIndex = this._dataController.getRowIndexByKey(args.previousValue) + oldRowIndexCorrection;\r\n if (isDefined(args.value) && args.value !== args.previousValue) {\r\n var _this$_editCellFromOp;\r\n null === (_this$_editCellFromOp = this._editCellFromOptionChanged) || void 0 === _this$_editCellFromOp ? void 0 : _this$_editCellFromOp.call(this, columnIndex, columnIndex, oldRowIndex)\r\n }\r\n } else {\r\n this.callBase.apply(this, arguments)\r\n }\r\n },\r\n deleteRow: function(rowIndex) {\r\n if (this.isCellEditMode() && this.isEditing()) {\r\n var isNewRow = this._dataController.items()[rowIndex].isNewRow;\r\n var rowKey = this._dataController.getKeyByRowIndex(rowIndex);\r\n this.closeEditCell(null, isNewRow).always(() => {\r\n rowIndex = this._dataController.getRowIndexByKey(rowKey);\r\n this._checkAndDeleteRow(rowIndex)\r\n })\r\n } else {\r\n this.callBase.apply(this, arguments)\r\n }\r\n },\r\n _checkAndDeleteRow: function(rowIndex) {\r\n if (this.isBatchEditMode()) {\r\n this._deleteRowCore(rowIndex)\r\n } else {\r\n this.callBase.apply(this, arguments)\r\n }\r\n },\r\n _refreshCore: function(params) {\r\n var {\r\n isPageChanged: isPageChanged\r\n } = null !== params && void 0 !== params ? params : {};\r\n var needResetIndexes = this.isBatchEditMode() || isPageChanged && \"virtual\" !== this.option(\"scrolling.mode\");\r\n if (this.isCellOrBatchEditMode()) {\r\n if (needResetIndexes) {\r\n this._resetEditColumnName();\r\n this._resetEditRowKey()\r\n }\r\n } else {\r\n this.callBase.apply(this, arguments)\r\n }\r\n },\r\n _allowRowAdding: function(params) {\r\n if (this.isBatchEditMode()) {\r\n return true\r\n }\r\n return this.callBase.apply(this, arguments)\r\n },\r\n _afterDeleteRow: function(rowIndex, oldEditRowIndex) {\r\n var dataController = this._dataController;\r\n if (this.isBatchEditMode()) {\r\n dataController.updateItems({\r\n changeType: \"update\",\r\n rowIndices: [oldEditRowIndex, rowIndex]\r\n });\r\n return (new Deferred).resolve()\r\n }\r\n return this.callBase.apply(this, arguments)\r\n },\r\n _updateEditRow: function(row, forceUpdateRow, isCustomSetCellValue) {\r\n if (this.isCellOrBatchEditMode()) {\r\n this._updateRowImmediately(row, forceUpdateRow, isCustomSetCellValue)\r\n } else {\r\n this.callBase.apply(this, arguments)\r\n }\r\n },\r\n _isDefaultButtonVisible: function(button, options) {\r\n if (this.isCellOrBatchEditMode()) {\r\n var isBatchMode = this.isBatchEditMode();\r\n switch (button.name) {\r\n case \"save\":\r\n case \"cancel\":\r\n case \"edit\":\r\n return false;\r\n case \"delete\":\r\n return this.callBase.apply(this, arguments) && (!isBatchMode || !options.row.removed);\r\n case \"undelete\":\r\n return isBatchMode && this.allowDeleting(options) && options.row.removed;\r\n default:\r\n return this.callBase.apply(this, arguments)\r\n }\r\n }\r\n return this.callBase.apply(this, arguments)\r\n },\r\n _isRowDeleteAllowed: function() {\r\n var callBase = this.callBase.apply(this, arguments);\r\n return callBase || this.isBatchEditMode()\r\n },\r\n _beforeEndSaving: function(changes) {\r\n if (this.isCellEditMode()) {\r\n var _changes$;\r\n if (\"update\" !== (null === (_changes$ = changes[0]) || void 0 === _changes$ ? void 0 : _changes$.type)) {\r\n this.callBase.apply(this, arguments)\r\n }\r\n } else {\r\n if (this.isBatchEditMode()) {\r\n this._resetModifiedClassCells(changes)\r\n }\r\n this.callBase.apply(this, arguments)\r\n }\r\n },\r\n prepareEditButtons: function(headerPanel) {\r\n var editingOptions = this.option(\"editing\") || {};\r\n var buttonItems = this.callBase.apply(this, arguments);\r\n if ((editingOptions.allowUpdating || editingOptions.allowAdding || editingOptions.allowDeleting) && this.isBatchEditMode()) {\r\n buttonItems.push(this.prepareButtonItem(headerPanel, \"save\", \"saveEditData\", 21));\r\n buttonItems.push(this.prepareButtonItem(headerPanel, \"revert\", \"cancelEditData\", 22))\r\n }\r\n return buttonItems\r\n },\r\n _saveEditDataInner: function() {\r\n var _deferred2;\r\n var editRow = this._dataController.getVisibleRows()[this.getEditRowIndex()];\r\n var editColumn = this._getEditColumn();\r\n var showEditorAlways = null === editColumn || void 0 === editColumn ? void 0 : editColumn.showEditorAlways;\r\n var isUpdateInCellMode = this.isCellEditMode() && !(null !== editRow && void 0 !== editRow && editRow.isNewRow);\r\n var deferred;\r\n if (isUpdateInCellMode && showEditorAlways) {\r\n deferred = new Deferred;\r\n this.addDeferred(deferred)\r\n }\r\n return this.callBase.apply(this, arguments).always(null === (_deferred2 = deferred) || void 0 === _deferred2 ? void 0 : _deferred2.resolve)\r\n },\r\n _applyChange: function(options, params, forceUpdateRow) {\r\n var isUpdateInCellMode = this.isCellEditMode() && options.row && !options.row.isNewRow;\r\n var showEditorAlways = options.column.showEditorAlways;\r\n var isCustomSetCellValue = options.column.setCellValue !== options.column.defaultSetCellValue;\r\n var focusPreviousEditingCell = showEditorAlways && !forceUpdateRow && isUpdateInCellMode && this.hasEditData() && !this.isEditCell(options.rowIndex, options.columnIndex);\r\n if (focusPreviousEditingCell) {\r\n this._focusEditingCell();\r\n this._updateEditRow(options.row, true, isCustomSetCellValue);\r\n return\r\n }\r\n return this.callBase.apply(this, arguments)\r\n },\r\n _applyChangeCore: function(options, forceUpdateRow) {\r\n var showEditorAlways = options.column.showEditorAlways;\r\n var isUpdateInCellMode = this.isCellEditMode() && options.row && !options.row.isNewRow;\r\n if (showEditorAlways && !forceUpdateRow) {\r\n if (isUpdateInCellMode) {\r\n this._setEditRowKey(options.row.key, true);\r\n this._setEditColumnNameByIndex(options.columnIndex, true);\r\n return this.saveEditData()\r\n } else if (this.isBatchEditMode()) {\r\n forceUpdateRow = this._needUpdateRow(options.column);\r\n return this.callBase(options, forceUpdateRow)\r\n }\r\n }\r\n return this.callBase.apply(this, arguments)\r\n },\r\n _processDataItemCore: function(item, _ref3) {\r\n var {\r\n data: data,\r\n type: type\r\n } = _ref3;\r\n if (this.isBatchEditMode() && type === DATA_EDIT_DATA_REMOVE_TYPE) {\r\n item.data = createObjectWithChanges(item.data, data)\r\n }\r\n this.callBase.apply(this, arguments)\r\n },\r\n _processRemoveCore: function(changes, editIndex, processIfBatch) {\r\n if (this.isBatchEditMode() && !processIfBatch) {\r\n return\r\n }\r\n return this.callBase.apply(this, arguments)\r\n },\r\n _processRemoveIfError: function() {\r\n if (this.isBatchEditMode()) {\r\n return\r\n }\r\n return this.callBase.apply(this, arguments)\r\n },\r\n _beforeFocusElementInRow: function(rowIndex) {\r\n this.callBase.apply(this, arguments);\r\n var editRowIndex = rowIndex >= 0 ? rowIndex : 0;\r\n var columnIndex = this.getFirstEditableColumnIndex();\r\n columnIndex >= 0 && this.editCell(editRowIndex, columnIndex)\r\n }\r\n }\r\n },\r\n views: {\r\n rowsView: {\r\n _createTable: function() {\r\n var $table = this.callBase.apply(this, arguments);\r\n var editingController = this._editingController;\r\n if (editingController.isCellOrBatchEditMode() && this.option(\"editing.allowUpdating\")) {\r\n eventsEngine.on($table, addNamespace(holdEvent.name, \"dxDataGridRowsView\"), \"td:not(.\" + EDITOR_CELL_CLASS + \")\", this.createAction(() => {\r\n if (editingController.isEditing()) {\r\n editingController.closeEditCell()\r\n }\r\n }))\r\n }\r\n return $table\r\n },\r\n _createRow: function(row) {\r\n var $row = this.callBase.apply(this, arguments);\r\n if (row) {\r\n var editingController = this._editingController;\r\n var isRowRemoved = !!row.removed;\r\n if (editingController.isBatchEditMode()) {\r\n isRowRemoved && $row.addClass(ROW_REMOVED)\r\n }\r\n }\r\n return $row\r\n }\r\n },\r\n headerPanel: {\r\n isVisible: function() {\r\n var editingOptions = this.getController(\"editing\").option(\"editing\");\r\n return this.callBase() || editingOptions && (editingOptions.allowUpdating || editingOptions.allowDeleting) && editingOptions.mode === EDIT_MODE_BATCH\r\n }\r\n }\r\n }\r\n }\r\n};\r\n","/**\r\n * DevExtreme (esm/ui/data_grid/ui.data_grid.editing_cell_based.js)\r\n * Version: 22.1.6\r\n * Build date: Tue Oct 18 2022\r\n *\r\n * Copyright (c) 2012 - 2022 Developer Express Inc. ALL RIGHTS RESERVED\r\n * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/\r\n */\r\nimport gridCore from \"./ui.data_grid.core\";\r\nimport editingCellBasedModule from \"../grid_core/ui.grid_core.editing_cell_based\";\r\ngridCore.registerModule(\"editingCellBased\", editingCellBasedModule);\r\n","/**\r\n * DevExtreme (esm/ui/grid_core/ui.grid_core.validating.js)\r\n * Version: 22.1.6\r\n * Build date: Tue Oct 18 2022\r\n *\r\n * Copyright (c) 2012 - 2022 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 getWidth,\r\n getOuterHeight,\r\n setHeight\r\n} from \"../../core/utils/size\";\r\nimport $ from \"../../core/renderer\";\r\nimport eventsEngine from \"../../events/core/events_engine\";\r\nimport modules from \"./ui.grid_core.modules\";\r\nimport gridCoreUtils from \"./ui.grid_core.utils\";\r\nimport {\r\n createObjectWithChanges\r\n} from \"../../data/array_utils\";\r\nimport {\r\n deferUpdate,\r\n equalByValue,\r\n getKeyHash\r\n} from \"../../core/utils/common\";\r\nimport {\r\n each\r\n} from \"../../core/utils/iterator\";\r\nimport {\r\n isDefined,\r\n isEmptyObject,\r\n isObject\r\n} from \"../../core/utils/type\";\r\nimport {\r\n extend\r\n} from \"../../core/utils/extend\";\r\nimport {\r\n focused\r\n} from \"../widget/selectors\";\r\nimport messageLocalization from \"../../localization/message\";\r\nimport Button from \"../button\";\r\nimport pointerEvents from \"../../events/pointer\";\r\nimport ValidationEngine from \"../validation_engine\";\r\nimport Validator from \"../validator\";\r\nimport Overlay from \"../overlay/ui.overlay\";\r\nimport errors from \"../widget/ui.errors\";\r\nimport {\r\n Deferred,\r\n when,\r\n fromPromise\r\n} from \"../../core/utils/deferred\";\r\nimport LoadIndicator from \"../load_indicator\";\r\nimport {\r\n encodeHtml\r\n} from \"../../core/utils/string\";\r\nimport browser from \"../../core/utils/browser\";\r\nvar INVALIDATE_CLASS = \"invalid\";\r\nvar REVERT_TOOLTIP_CLASS = \"revert-tooltip\";\r\nvar ROWS_VIEW_CLASS = \"rowsview\";\r\nvar INVALID_MESSAGE_CLASS = \"dx-invalid-message\";\r\nvar WIDGET_INVALID_MESSAGE_CLASS = \"invalid-message\";\r\nvar INVALID_MESSAGE_ALWAYS_CLASS = \"dx-invalid-message-always\";\r\nvar REVERT_BUTTON_CLASS = \"dx-revert-button\";\r\nvar VALIDATOR_CLASS = \"validator\";\r\nvar PENDING_INDICATOR_CLASS = \"dx-pending-indicator\";\r\nvar VALIDATION_PENDING_CLASS = \"dx-validation-pending\";\r\nvar CONTENT_CLASS = \"content\";\r\nvar INSERT_INDEX = \"__DX_INSERT_INDEX__\";\r\nvar PADDING_BETWEEN_TOOLTIPS = 2;\r\nvar EDIT_MODE_ROW = \"row\";\r\nvar EDIT_MODE_FORM = \"form\";\r\nvar EDIT_MODE_BATCH = \"batch\";\r\nvar EDIT_MODE_CELL = \"cell\";\r\nvar EDIT_MODE_POPUP = \"popup\";\r\nvar GROUP_CELL_CLASS = \"dx-group-cell\";\r\nvar FORM_BASED_MODES = [EDIT_MODE_POPUP, EDIT_MODE_FORM];\r\nvar COMMAND_TRANSPARENT = \"transparent\";\r\nvar VALIDATION_STATUS = {\r\n valid: \"valid\",\r\n invalid: \"invalid\",\r\n pending: \"pending\"\r\n};\r\nvar EDIT_DATA_INSERT_TYPE = \"insert\";\r\nvar EDIT_DATA_REMOVE_TYPE = \"remove\";\r\nvar VALIDATION_CANCELLED = \"cancel\";\r\nvar validationResultIsValid = function(result) {\r\n return isDefined(result) && result !== VALIDATION_CANCELLED\r\n};\r\nvar cellValueShouldBeValidated = function(value, rowOptions) {\r\n return void 0 !== value || void 0 === value && rowOptions && !rowOptions.isNewRow\r\n};\r\nvar ValidatingController = modules.Controller.inherit({\r\n init: function() {\r\n this._editingController = this.getController(\"editing\");\r\n this.createAction(\"onRowValidating\");\r\n if (!this._validationState) {\r\n this.initValidationState()\r\n }\r\n },\r\n initValidationState() {\r\n this._validationState = [];\r\n this._validationStateCache = {}\r\n },\r\n _rowIsValidated: function(change) {\r\n var validationData = this._getValidationData(null === change || void 0 === change ? void 0 : change.key);\r\n return !!validationData && !!validationData.validated\r\n },\r\n _getValidationData: function(key, create) {\r\n var keyHash = getKeyHash(key);\r\n var isObjectKeyHash = isObject(keyHash);\r\n var validationData;\r\n if (isObjectKeyHash) {\r\n validationData = this._validationState.filter(data => equalByValue(data.key, key))[0]\r\n } else {\r\n validationData = this._validationStateCache[keyHash]\r\n }\r\n if (!validationData && create) {\r\n validationData = {\r\n key: key,\r\n isValid: true\r\n };\r\n this._validationState.push(validationData);\r\n if (!isObjectKeyHash) {\r\n this._validationStateCache[keyHash] = validationData\r\n }\r\n }\r\n return validationData\r\n },\r\n _getBrokenRules: function(validationData, validationResults) {\r\n var brokenRules;\r\n if (validationResults) {\r\n brokenRules = validationResults.brokenRules || validationResults.brokenRule && [validationResults.brokenRule]\r\n } else {\r\n brokenRules = validationData.brokenRules || []\r\n }\r\n return brokenRules\r\n },\r\n _rowValidating: function(validationData, validationResults) {\r\n var deferred = new Deferred;\r\n var change = this._editingController.getChangeByKey(null === validationData || void 0 === validationData ? void 0 : validationData.key);\r\n var brokenRules = this._getBrokenRules(validationData, validationResults);\r\n var isValid = validationResults ? validationResults.isValid : validationData.isValid;\r\n var parameters = {\r\n brokenRules: brokenRules,\r\n isValid: isValid,\r\n key: change.key,\r\n newData: change.data,\r\n oldData: this._editingController._getOldData(change.key),\r\n promise: null,\r\n errorText: this.getHiddenValidatorsErrorText(brokenRules)\r\n };\r\n this.executeAction(\"onRowValidating\", parameters);\r\n when(fromPromise(parameters.promise)).always((function() {\r\n validationData.isValid = parameters.isValid;\r\n validationData.errorText = parameters.errorText;\r\n deferred.resolve(parameters)\r\n }));\r\n return deferred.promise()\r\n },\r\n getHiddenValidatorsErrorText: function(brokenRules) {\r\n var brokenRulesMessages = [];\r\n each(brokenRules, (function(_, brokenRule) {\r\n var column = brokenRule.column;\r\n var isGroupExpandColumn = column && void 0 !== column.groupIndex && !column.showWhenGrouped;\r\n var isVisibleColumn = column && column.visible;\r\n if (!brokenRule.validator.$element().parent().length && (!isVisibleColumn || isGroupExpandColumn)) {\r\n brokenRulesMessages.push(brokenRule.message)\r\n }\r\n }));\r\n return brokenRulesMessages.join(\", \")\r\n },\r\n validate: function(isFull) {\r\n var isValid = true;\r\n var editingController = this._editingController;\r\n var deferred = new Deferred;\r\n var completeList = [];\r\n var editMode = editingController.getEditMode();\r\n isFull = isFull || editMode === EDIT_MODE_ROW;\r\n if (this._isValidationInProgress) {\r\n return deferred.resolve(false).promise()\r\n }\r\n this._isValidationInProgress = true;\r\n if (isFull) {\r\n editingController.addDeferred(deferred);\r\n var changes = editingController.getChanges();\r\n each(changes, (index, _ref) => {\r\n var {\r\n type: type,\r\n key: key\r\n } = _ref;\r\n if (\"remove\" !== type) {\r\n var validationData = this._getValidationData(key, true);\r\n var validationResult = this.validateGroup(validationData);\r\n completeList.push(validationResult);\r\n validationResult.done(validationResult => {\r\n validationData.validated = true;\r\n isValid = isValid && validationResult.isValid\r\n })\r\n }\r\n })\r\n } else if (this._currentCellValidator) {\r\n var validationResult = this.validateGroup(this._currentCellValidator._findGroup());\r\n completeList.push(validationResult);\r\n validationResult.done(validationResult => {\r\n isValid = validationResult.isValid\r\n })\r\n }\r\n when(...completeList).done(() => {\r\n this._isValidationInProgress = false;\r\n deferred.resolve(isValid)\r\n });\r\n return deferred.promise()\r\n },\r\n validateGroup: function(validationData) {\r\n var _validationResult;\r\n var result = new Deferred;\r\n var validateGroup = validationData && ValidationEngine.getGroupConfig(validationData);\r\n var validationResult;\r\n if (null !== validateGroup && void 0 !== validateGroup && validateGroup.validators.length) {\r\n this.resetRowValidationResults(validationData);\r\n validationResult = ValidationEngine.validateGroup(validationData)\r\n }\r\n when((null === (_validationResult = validationResult) || void 0 === _validationResult ? void 0 : _validationResult.complete) || validationResult).done(validationResult => {\r\n when(this._rowValidating(validationData, validationResult)).done(result.resolve)\r\n });\r\n return result.promise()\r\n },\r\n isRowDataModified: change => !isEmptyObject(change.data),\r\n updateValidationState: function(change) {\r\n var editMode = this._editingController.getEditMode();\r\n var key = change.key;\r\n var validationData = this._getValidationData(key, true);\r\n if (-1 === FORM_BASED_MODES.indexOf(editMode)) {\r\n if (change.type === EDIT_DATA_INSERT_TYPE && !this.isRowDataModified(change)) {\r\n validationData.isValid = true;\r\n return\r\n }\r\n this.setDisableApplyValidationResults(true);\r\n var groupConfig = ValidationEngine.getGroupConfig(validationData);\r\n if (groupConfig) {\r\n var validationResult = ValidationEngine.validateGroup(validationData);\r\n when(validationResult.complete || validationResult).done(validationResult => {\r\n validationData.isValid = validationResult.isValid;\r\n validationData.brokenRules = validationResult.brokenRules\r\n })\r\n } else if (!validationData.brokenRules || !validationData.brokenRules.length) {\r\n validationData.isValid = true\r\n }\r\n this.setDisableApplyValidationResults(false)\r\n } else {\r\n validationData.isValid = true\r\n }\r\n },\r\n setValidator: function(validator) {\r\n this._currentCellValidator = validator\r\n },\r\n renderCellPendingIndicator: function($container) {\r\n var $indicator = $container.find(\".\" + PENDING_INDICATOR_CLASS);\r\n if (!$indicator.length) {\r\n var $indicatorContainer = $container;\r\n $indicator = $(\"
\").appendTo($indicatorContainer).addClass(PENDING_INDICATOR_CLASS);\r\n this._createComponent($indicator, LoadIndicator);\r\n $container.addClass(VALIDATION_PENDING_CLASS)\r\n }\r\n },\r\n disposeCellPendingIndicator: function($container) {\r\n var $indicator = $container.find(\".\" + PENDING_INDICATOR_CLASS);\r\n if ($indicator.length) {\r\n var indicator = LoadIndicator.getInstance($indicator);\r\n if (indicator) {\r\n indicator.dispose();\r\n indicator.$element().remove()\r\n }\r\n $container.removeClass(VALIDATION_PENDING_CLASS)\r\n }\r\n },\r\n validationStatusChanged: function(result) {\r\n var validator = result.validator;\r\n var validationGroup = validator.option(\"validationGroup\");\r\n var column = validator.option(\"dataGetter\")().column;\r\n this.updateCellValidationResult({\r\n rowKey: validationGroup.key,\r\n columnIndex: column.index,\r\n validationResult: result\r\n })\r\n },\r\n validatorInitialized: function(arg) {\r\n arg.component.on(\"validating\", this.validationStatusChanged.bind(this));\r\n arg.component.on(\"validated\", this.validationStatusChanged.bind(this))\r\n },\r\n validatorDisposing: function(arg) {\r\n var validator = arg.component;\r\n var validationGroup = validator.option(\"validationGroup\");\r\n var column = validator.option(\"dataGetter\")().column;\r\n var result = this.getCellValidationResult({\r\n rowKey: null === validationGroup || void 0 === validationGroup ? void 0 : validationGroup.key,\r\n columnIndex: column.index\r\n });\r\n if (validationResultIsValid(result) && result.status === VALIDATION_STATUS.pending) {\r\n this.cancelCellValidationResult({\r\n change: validationGroup,\r\n columnIndex: column.index\r\n })\r\n }\r\n },\r\n applyValidationResult: function($container, result) {\r\n var validator = result.validator;\r\n var validationGroup = validator.option(\"validationGroup\");\r\n var column = validator.option(\"dataGetter\")().column;\r\n result.brokenRules && result.brokenRules.forEach(rule => {\r\n rule.columnIndex = column.index;\r\n rule.column = column\r\n });\r\n if ($container) {\r\n var validationResult = this.getCellValidationResult({\r\n rowKey: validationGroup.key,\r\n columnIndex: column.index\r\n });\r\n var requestIsDisabled = validationResultIsValid(validationResult) && validationResult.disabledPendingId === result.id;\r\n if (this._disableApplyValidationResults || requestIsDisabled) {\r\n return\r\n }\r\n if (result.status === VALIDATION_STATUS.invalid) {\r\n var $focus = $container.find(\":focus\");\r\n if (!focused($focus)) {\r\n eventsEngine.trigger($focus, \"focus\");\r\n eventsEngine.trigger($focus, pointerEvents.down)\r\n }\r\n }\r\n var editor = !column.editCellTemplate && this.getController(\"editorFactory\").getEditorInstance($container);\r\n if (result.status === VALIDATION_STATUS.pending) {\r\n if (editor) {\r\n editor.option(\"validationStatus\", VALIDATION_STATUS.pending)\r\n } else {\r\n this.renderCellPendingIndicator($container)\r\n }\r\n } else if (editor) {\r\n editor.option(\"validationStatus\", VALIDATION_STATUS.valid)\r\n } else {\r\n this.disposeCellPendingIndicator($container)\r\n }\r\n $container.toggleClass(this.addWidgetPrefix(INVALIDATE_CLASS), result.status === VALIDATION_STATUS.invalid)\r\n }\r\n },\r\n _syncInternalEditingData: function(parameters) {\r\n var _parameters$row;\r\n var editingController = this._editingController;\r\n var change = editingController.getChangeByKey(parameters.key);\r\n var oldDataFromState = editingController._getOldData(parameters.key);\r\n var oldData = null === (_parameters$row = parameters.row) || void 0 === _parameters$row ? void 0 : _parameters$row.oldData;\r\n if (change && oldData && !oldDataFromState) {\r\n editingController._addInternalData({\r\n key: parameters.key,\r\n oldData: oldData\r\n })\r\n }\r\n },\r\n createValidator: function(parameters, $container) {\r\n var editingController = this._editingController;\r\n var column = parameters.column;\r\n var showEditorAlways = column.showEditorAlways;\r\n if (isDefined(column.command) || !column.validationRules || !Array.isArray(column.validationRules) || !column.validationRules.length) {\r\n return\r\n }\r\n var editIndex = editingController.getIndexByKey(parameters.key, editingController.getChanges());\r\n var needCreateValidator = editIndex > -1;\r\n if (!needCreateValidator) {\r\n if (!showEditorAlways) {\r\n var columnsController = this.getController(\"columns\");\r\n var visibleColumns = (null === columnsController || void 0 === columnsController ? void 0 : columnsController.getVisibleColumns()) || [];\r\n showEditorAlways = visibleColumns.some((function(column) {\r\n return column.showEditorAlways\r\n }))\r\n }\r\n var isEditRow = equalByValue(this.option(\"editing.editRowKey\"), parameters.key);\r\n var isCellOrBatchEditingAllowed = editingController.isCellOrBatchEditMode() && editingController.allowUpdating({\r\n row: parameters.row\r\n });\r\n needCreateValidator = isEditRow || isCellOrBatchEditingAllowed && showEditorAlways;\r\n if (isCellOrBatchEditingAllowed && showEditorAlways) {\r\n var _parameters$row$oldDa, _parameters$row2;\r\n editingController._addInternalData({\r\n key: parameters.key,\r\n oldData: null !== (_parameters$row$oldDa = null === (_parameters$row2 = parameters.row) || void 0 === _parameters$row2 ? void 0 : _parameters$row2.oldData) && void 0 !== _parameters$row$oldDa ? _parameters$row$oldDa : parameters.data\r\n })\r\n }\r\n }\r\n if (needCreateValidator) {\r\n if ($container && !$container.length) {\r\n errors.log(\"E1050\");\r\n return\r\n }\r\n this._syncInternalEditingData(parameters);\r\n var validationData = this._getValidationData(parameters.key, true);\r\n var getValue = () => {\r\n var change = editingController.getChangeByKey(null === validationData || void 0 === validationData ? void 0 : validationData.key);\r\n var value = column.calculateCellValue((null === change || void 0 === change ? void 0 : change.data) || {});\r\n return void 0 !== value ? value : parameters.value\r\n };\r\n var useDefaultValidator = $container && $container.hasClass(\"dx-widget\");\r\n $container && $container.addClass(this.addWidgetPrefix(VALIDATOR_CLASS));\r\n var validator = new Validator($container || $(\"
\"), {\r\n name: column.caption,\r\n validationRules: extend(true, [], column.validationRules),\r\n validationGroup: validationData,\r\n adapter: useDefaultValidator ? null : {\r\n getValue: getValue,\r\n applyValidationResults: result => {\r\n this.applyValidationResult($container, result)\r\n }\r\n },\r\n dataGetter: function() {\r\n var key = null === validationData || void 0 === validationData ? void 0 : validationData.key;\r\n var change = editingController.getChangeByKey(key);\r\n var oldData = editingController._getOldData(key);\r\n return {\r\n data: createObjectWithChanges(oldData, null === change || void 0 === change ? void 0 : change.data),\r\n column: column\r\n }\r\n },\r\n onInitialized: this.validatorInitialized.bind(this),\r\n onDisposing: this.validatorDisposing.bind(this)\r\n });\r\n if (useDefaultValidator) {\r\n var adapter = validator.option(\"adapter\");\r\n if (adapter) {\r\n adapter.getValue = getValue;\r\n adapter.validationRequestsCallbacks = [];\r\n adapter.bypass = () => parameters.row.isNewRow && !this._isValidationInProgress && !editingController.isCellModified(parameters)\r\n }\r\n }\r\n return validator\r\n }\r\n },\r\n setDisableApplyValidationResults: function(flag) {\r\n this._disableApplyValidationResults = flag\r\n },\r\n getDisableApplyValidationResults: function() {\r\n return this._disableApplyValidationResults\r\n },\r\n isCurrentValidatorProcessing: function(_ref2) {\r\n var {\r\n rowKey: rowKey,\r\n columnIndex: columnIndex\r\n } = _ref2;\r\n return this._currentCellValidator && equalByValue(this._currentCellValidator.option(\"validationGroup\").key, rowKey) && this._currentCellValidator.option(\"dataGetter\")().column.index === columnIndex\r\n },\r\n validateCell: function(validator) {\r\n var cellParams = {\r\n rowKey: validator.option(\"validationGroup\").key,\r\n columnIndex: validator.option(\"dataGetter\")().column.index\r\n };\r\n var validationResult = this.getCellValidationResult(cellParams);\r\n var stateRestored = validationResultIsValid(validationResult);\r\n if (!stateRestored) {\r\n validationResult = validator.validate()\r\n }\r\n var deferred = new Deferred;\r\n var adapter = validator.option(\"adapter\");\r\n if (stateRestored && validationResult.status === VALIDATION_STATUS.pending) {\r\n this.updateCellValidationResult(cellParams);\r\n adapter.applyValidationResults(validationResult)\r\n }\r\n when(validationResult.complete || validationResult).done(validationResult => {\r\n stateRestored && adapter.applyValidationResults(validationResult);\r\n deferred.resolve(validationResult)\r\n });\r\n return deferred.promise()\r\n },\r\n updateCellValidationResult: function(_ref3) {\r\n var {\r\n rowKey: rowKey,\r\n columnIndex: columnIndex,\r\n validationResult: validationResult\r\n } = _ref3;\r\n var validationData = this._getValidationData(rowKey);\r\n if (!validationData) {\r\n return\r\n }\r\n if (!validationData.validationResults) {\r\n validationData.validationResults = {}\r\n }\r\n var result;\r\n if (validationResult) {\r\n result = extend({}, validationResult);\r\n validationData.validationResults[columnIndex] = result;\r\n if (validationResult.status === VALIDATION_STATUS.pending) {\r\n if (this._editingController.getEditMode() === EDIT_MODE_CELL) {\r\n result.deferred = new Deferred;\r\n result.complete.always(() => {\r\n result.deferred.resolve()\r\n });\r\n this._editingController.addDeferred(result.deferred)\r\n }\r\n if (this._disableApplyValidationResults) {\r\n result.disabledPendingId = validationResult.id;\r\n return\r\n }\r\n }\r\n } else {\r\n result = validationData.validationResults[columnIndex]\r\n }\r\n if (result && result.disabledPendingId) {\r\n delete result.disabledPendingId\r\n }\r\n },\r\n getCellValidationResult: function(_ref4) {\r\n var _validationData$valid;\r\n var {\r\n rowKey: rowKey,\r\n columnIndex: columnIndex\r\n } = _ref4;\r\n var validationData = this._getValidationData(rowKey, true);\r\n return null === validationData || void 0 === validationData ? void 0 : null === (_validationData$valid = validationData.validationResults) || void 0 === _validationData$valid ? void 0 : _validationData$valid[columnIndex]\r\n },\r\n removeCellValidationResult: function(_ref5) {\r\n var {\r\n change: change,\r\n columnIndex: columnIndex\r\n } = _ref5;\r\n var validationData = this._getValidationData(null === change || void 0 === change ? void 0 : change.key);\r\n if (validationData && validationData.validationResults) {\r\n this.cancelCellValidationResult({\r\n change: change,\r\n columnIndex: columnIndex\r\n });\r\n delete validationData.validationResults[columnIndex]\r\n }\r\n },\r\n cancelCellValidationResult: function(_ref6) {\r\n var {\r\n change: change,\r\n columnIndex: columnIndex\r\n } = _ref6;\r\n var validationData = this._getValidationData(change.key);\r\n if (change && validationData.validationResults) {\r\n var result = validationData.validationResults[columnIndex];\r\n if (result) {\r\n result.deferred && result.deferred.reject(VALIDATION_CANCELLED);\r\n validationData.validationResults[columnIndex] = VALIDATION_CANCELLED\r\n }\r\n }\r\n },\r\n resetRowValidationResults: function(validationData) {\r\n if (validationData) {\r\n validationData.validationResults && delete validationData.validationResults;\r\n delete validationData.validated\r\n }\r\n },\r\n isInvalidCell: function(_ref7) {\r\n var {\r\n rowKey: rowKey,\r\n columnIndex: columnIndex\r\n } = _ref7;\r\n var result = this.getCellValidationResult({\r\n rowKey: rowKey,\r\n columnIndex: columnIndex\r\n });\r\n return validationResultIsValid(result) && result.status === VALIDATION_STATUS.invalid\r\n },\r\n getCellValidator: function(_ref8) {\r\n var {\r\n rowKey: rowKey,\r\n columnIndex: columnIndex\r\n } = _ref8;\r\n var validationData = this._getValidationData(rowKey);\r\n var groupConfig = validationData && ValidationEngine.getGroupConfig(validationData);\r\n var validators = groupConfig && groupConfig.validators;\r\n return validators && validators.filter(v => {\r\n var column = v.option(\"dataGetter\")().column;\r\n return column ? column.index === columnIndex : false\r\n })[0]\r\n },\r\n setCellValidationStatus: function(cellOptions) {\r\n var validationResult = this.getCellValidationResult({\r\n rowKey: cellOptions.key,\r\n columnIndex: cellOptions.column.index\r\n });\r\n if (isDefined(validationResult)) {\r\n cellOptions.validationStatus = validationResult !== VALIDATION_CANCELLED ? validationResult.status : VALIDATION_CANCELLED\r\n } else {\r\n delete cellOptions.validationStatus\r\n }\r\n }\r\n});\r\nexport var validatingModule = {\r\n defaultOptions: function() {\r\n return {\r\n editing: {\r\n texts: {\r\n validationCancelChanges: messageLocalization.format(\"dxDataGrid-validationCancelChanges\")\r\n }\r\n }\r\n }\r\n },\r\n controllers: {\r\n validating: ValidatingController\r\n },\r\n extenders: {\r\n controllers: {\r\n editing: {\r\n _addChange: function(changeParams) {\r\n var change = this.callBase.apply(this, arguments);\r\n var validatingController = this.getController(\"validating\");\r\n if (change && changeParams.type !== EDIT_DATA_REMOVE_TYPE) {\r\n validatingController.updateValidationState(change)\r\n }\r\n return change\r\n },\r\n _handleChangesChange: function(args) {\r\n this.callBase.apply(this, arguments);\r\n var validatingController = this.getController(\"validating\");\r\n args.value.forEach(change => {\r\n if (void 0 === validatingController._getValidationData(change.key)) {\r\n validatingController.updateValidationState(change)\r\n }\r\n })\r\n },\r\n _updateRowAndPageIndices: function() {\r\n var that = this;\r\n var startInsertIndex = that.getView(\"rowsView\").getTopVisibleItemIndex();\r\n var rowIndex = startInsertIndex;\r\n each(that.getChanges(), (_, _ref9) => {\r\n var {\r\n key: key,\r\n type: type\r\n } = _ref9;\r\n var validationData = this.getController(\"validating\")._getValidationData(key);\r\n if (validationData && !validationData.isValid && validationData.pageIndex !== that._pageIndex) {\r\n validationData.pageIndex = that._pageIndex;\r\n if (type === EDIT_DATA_INSERT_TYPE) {\r\n validationData.rowIndex = startInsertIndex\r\n } else {\r\n validationData.rowIndex = rowIndex\r\n }\r\n rowIndex++\r\n }\r\n })\r\n },\r\n _getValidationGroupsInForm: function(detailOptions) {\r\n var validatingController = this.getController(\"validating\");\r\n var validationData = validatingController._getValidationData(detailOptions.key, true);\r\n return {\r\n validationGroup: validationData\r\n }\r\n },\r\n _validateEditFormAfterUpdate: function(row, isCustomSetCellValue) {\r\n if (isCustomSetCellValue && this._editForm) {\r\n this._editForm.validate()\r\n }\r\n this.callBase.apply(this, arguments)\r\n },\r\n _prepareEditCell: function(params) {\r\n var isNotCanceled = this.callBase.apply(this, arguments);\r\n var validatingController = this.getController(\"validating\");\r\n if (isNotCanceled && params.column.showEditorAlways) {\r\n validatingController.updateValidationState({\r\n key: params.key\r\n })\r\n }\r\n return isNotCanceled\r\n },\r\n processItems: function(items, changeType) {\r\n var changes = this.getChanges();\r\n var dataController = this.getController(\"data\");\r\n var validatingController = this.getController(\"validating\");\r\n items = this.callBase(items, changeType);\r\n var itemsCount = items.length;\r\n var addInValidItem = function(change, validationData) {\r\n var data = {\r\n key: change.key\r\n };\r\n var index = function(change, items) {\r\n var index = -1;\r\n var isInsert = change.type === EDIT_DATA_INSERT_TYPE;\r\n var key = change.key;\r\n each(items, (function(i, item) {\r\n if (equalByValue(key, isInsert ? item.key : dataController.keyOf(item))) {\r\n index = i;\r\n return false\r\n }\r\n }));\r\n return index\r\n }(change, items);\r\n if (index >= 0) {\r\n return\r\n }\r\n validationData.rowIndex = validationData.rowIndex > itemsCount ? validationData.rowIndex % itemsCount : validationData.rowIndex;\r\n var rowIndex = validationData.rowIndex;\r\n data[INSERT_INDEX] = 1;\r\n items.splice(rowIndex, 0, data)\r\n };\r\n if (this.getEditMode() === EDIT_MODE_BATCH && \"prepend\" !== changeType && \"append\" !== changeType) {\r\n changes.forEach(change => {\r\n var key = change.key;\r\n var validationData = validatingController._getValidationData(key);\r\n if (validationData && change.type && validationData.pageIndex === this._pageIndex && (null === change || void 0 === change ? void 0 : change.pageIndex) !== this._pageIndex) {\r\n addInValidItem(change, validationData)\r\n }\r\n })\r\n }\r\n return items\r\n },\r\n processDataItem: function(item) {\r\n var isInserted = item.data[INSERT_INDEX];\r\n var key = isInserted ? item.data.key : item.key;\r\n var editMode = this.getEditMode();\r\n if (editMode === EDIT_MODE_BATCH && isInserted && key) {\r\n var changes = this.getChanges();\r\n var editIndex = gridCoreUtils.getIndexByKey(key, changes);\r\n if (editIndex >= 0) {\r\n var change = changes[editIndex];\r\n if (change.type !== EDIT_DATA_INSERT_TYPE) {\r\n var oldData = this._getOldData(change.key);\r\n item.data = extend(true, {}, oldData, change.data);\r\n item.key = key\r\n }\r\n }\r\n }\r\n this.callBase.apply(this, arguments)\r\n },\r\n _createInvisibleColumnValidators: function(changes) {\r\n var that = this;\r\n var validatingController = this.getController(\"validating\");\r\n var columnsController = this.getController(\"columns\");\r\n var columns = columnsController.getColumns();\r\n var invisibleColumns = columnsController.getInvisibleColumns().filter(column => !column.isBand);\r\n var groupColumns = columnsController.getGroupColumns().filter(column => !column.showWhenGrouped && -1 === invisibleColumns.indexOf(column));\r\n var invisibleColumnValidators = [];\r\n var isCellVisible = (column, rowKey) => this._dataController.getRowIndexByKey(rowKey) >= 0 && invisibleColumns.indexOf(column) < 0;\r\n invisibleColumns.push(...groupColumns);\r\n if (-1 === FORM_BASED_MODES.indexOf(this.getEditMode())) {\r\n each(columns, (function(_, column) {\r\n changes.forEach((function(change) {\r\n var data;\r\n if (isCellVisible(column, change.key)) {\r\n return\r\n }\r\n if (change.type === EDIT_DATA_INSERT_TYPE) {\r\n data = change.data\r\n } else if (\"update\" === change.type) {\r\n var oldData = that._getOldData(change.key);\r\n data = createObjectWithChanges(oldData, change.data)\r\n }\r\n if (data) {\r\n var validator = validatingController.createValidator({\r\n column: column,\r\n key: change.key,\r\n value: column.calculateCellValue(data)\r\n });\r\n if (validator) {\r\n invisibleColumnValidators.push(validator)\r\n }\r\n }\r\n }))\r\n }))\r\n }\r\n return function() {\r\n invisibleColumnValidators.forEach((function(validator) {\r\n validator.dispose()\r\n }))\r\n }\r\n },\r\n _beforeSaveEditData: function(change, editIndex) {\r\n var result = this.callBase.apply(this, arguments);\r\n var validatingController = this.getController(\"validating\");\r\n var validationData = validatingController._getValidationData(null === change || void 0 === change ? void 0 : change.key);\r\n if (change) {\r\n var isValid = \"remove\" === change.type || validationData.isValid;\r\n result = result || !isValid\r\n } else {\r\n var disposeValidators = this._createInvisibleColumnValidators(this.getChanges());\r\n result = new Deferred;\r\n this.executeOperation(result, () => {\r\n validatingController.validate(true).done(isFullValid => {\r\n disposeValidators();\r\n this._updateRowAndPageIndices();\r\n switch (this.getEditMode()) {\r\n case EDIT_MODE_CELL:\r\n if (!isFullValid) {\r\n this._focusEditingCell()\r\n }\r\n break;\r\n case EDIT_MODE_BATCH:\r\n if (!isFullValid) {\r\n this._resetEditRowKey();\r\n this._resetEditColumnName();\r\n this.getController(\"data\").updateItems()\r\n }\r\n }\r\n result.resolve(!isFullValid)\r\n })\r\n })\r\n }\r\n return result.promise ? result.promise() : result\r\n },\r\n _beforeEditCell: function(rowIndex, columnIndex, item) {\r\n var result = this.callBase(rowIndex, columnIndex, item);\r\n if (this.getEditMode() === EDIT_MODE_CELL) {\r\n var $cell = this._rowsView._getCellElement(rowIndex, columnIndex);\r\n var validator = $cell && $cell.data(\"dxValidator\");\r\n var rowOptions = $cell && $cell.closest(\".dx-row\").data(\"options\");\r\n var value = validator && validator.option(\"adapter\").getValue();\r\n if (validator && cellValueShouldBeValidated(value, rowOptions)) {\r\n var validatingController = this.getController(\"validating\");\r\n var deferred = new Deferred;\r\n when(validatingController.validateCell(validator), result).done((validationResult, result) => {\r\n deferred.resolve(validationResult.status === VALIDATION_STATUS.valid && result)\r\n });\r\n return deferred.promise()\r\n } else if (!validator) {\r\n return result\r\n }\r\n }\r\n },\r\n _afterSaveEditData: function(cancel) {\r\n var $firstErrorRow;\r\n var isCellEditMode = this.getEditMode() === EDIT_MODE_CELL;\r\n each(this.getChanges(), (_, change) => {\r\n var $errorRow = this._showErrorRow(change);\r\n $firstErrorRow = $firstErrorRow || $errorRow\r\n });\r\n if ($firstErrorRow) {\r\n var scrollable = this._rowsView.getScrollable();\r\n if (scrollable) {\r\n scrollable.update();\r\n scrollable.scrollToElement($firstErrorRow)\r\n }\r\n }\r\n if (cancel && isCellEditMode && this._needUpdateRow()) {\r\n var editRowIndex = this.getEditRowIndex();\r\n this._dataController.updateItems({\r\n changeType: \"update\",\r\n rowIndices: [editRowIndex]\r\n });\r\n this._focusEditingCell()\r\n } else if (!cancel) {\r\n var shouldResetValidationState = true;\r\n if (isCellEditMode) {\r\n var columns = this.getController(\"columns\").getColumns();\r\n var columnsWithValidatingEditors = columns.filter(col => {\r\n var _col$validationRules;\r\n return col.showEditorAlways && (null === (_col$validationRules = col.validationRules) || void 0 === _col$validationRules ? void 0 : _col$validationRules.length) > 0\r\n }).length > 0;\r\n shouldResetValidationState = !columnsWithValidatingEditors\r\n }\r\n if (shouldResetValidationState) {\r\n this.getController(\"validating\").initValidationState()\r\n }\r\n }\r\n },\r\n _handleDataChanged: function(args) {\r\n var validationState = this.getController(\"validating\")._validationState;\r\n if (\"standard\" === this.option(\"scrolling.mode\")) {\r\n this.resetRowAndPageIndices()\r\n }\r\n if (\"prepend\" === args.changeType) {\r\n each(validationState, (function(_, validationData) {\r\n validationData.rowIndex += args.items.length\r\n }))\r\n }\r\n this.callBase(args)\r\n },\r\n resetRowAndPageIndices: function() {\r\n var validationState = this.getController(\"validating\")._validationState;\r\n each(validationState, (_, validationData) => {\r\n if (validationData.pageIndex !== this._pageIndex) {\r\n delete validationData.pageIndex;\r\n delete validationData.rowIndex\r\n }\r\n })\r\n },\r\n _beforeCancelEditData: function() {\r\n this.getController(\"validating\").initValidationState();\r\n this.callBase()\r\n },\r\n _showErrorRow: function(change) {\r\n var $popupContent;\r\n var errorHandling = this.getController(\"errorHandling\");\r\n var items = this.getController(\"data\").items();\r\n var rowIndex = this.getIndexByKey(change.key, items);\r\n var validationData = this.getController(\"validating\")._getValidationData(change.key);\r\n if (!(null !== validationData && void 0 !== validationData && validationData.isValid) && null !== validationData && void 0 !== validationData && validationData.errorText && rowIndex >= 0) {\r\n $popupContent = this.getPopupContent();\r\n return errorHandling && errorHandling.renderErrorRow(null === validationData || void 0 === validationData ? void 0 : validationData.errorText, rowIndex, $popupContent)\r\n }\r\n },\r\n updateFieldValue: function(e) {\r\n var validatingController = this.getController(\"validating\");\r\n var deferred = new Deferred;\r\n validatingController.removeCellValidationResult({\r\n change: this.getChangeByKey(e.key),\r\n columnIndex: e.column.index\r\n });\r\n this.callBase.apply(this, arguments).done(() => {\r\n var currentValidator = validatingController.getCellValidator({\r\n rowKey: e.key,\r\n columnIndex: e.column.index\r\n });\r\n when(currentValidator && validatingController.validateCell(currentValidator)).done(validationResult => {\r\n this.getController(\"editorFactory\").refocus();\r\n deferred.resolve(validationResult)\r\n })\r\n });\r\n return deferred.promise()\r\n },\r\n highlightDataCell: function($cell, parameters) {\r\n this.callBase.apply(this, arguments);\r\n var validatingController = this.getController(\"validating\");\r\n validatingController.setCellValidationStatus(parameters);\r\n var isEditableCell = !!parameters.setValue;\r\n var cellModified = this.isCellModified(parameters);\r\n var isValidated = isDefined(parameters.validationStatus);\r\n var needValidation = cellModified && parameters.column.setCellValue || isEditableCell && !cellModified && !(parameters.row.isNewRow || !isValidated);\r\n if (needValidation) {\r\n var validator = $cell.data(\"dxValidator\");\r\n if (validator) {\r\n when(this.getController(\"validating\").validateCell(validator)).done(() => {\r\n validatingController.setCellValidationStatus(parameters)\r\n })\r\n }\r\n }\r\n },\r\n getChangeByKey: function(key) {\r\n var changes = this.getChanges();\r\n return changes[gridCoreUtils.getIndexByKey(key, changes)]\r\n },\r\n isCellModified: function(parameters) {\r\n var cellModified = this.callBase(parameters);\r\n var change = this.getChangeByKey(parameters.key);\r\n var isCellInvalid = !!parameters.row && this.getController(\"validating\").isInvalidCell({\r\n rowKey: parameters.key,\r\n columnIndex: parameters.column.index\r\n });\r\n return cellModified || this.getController(\"validating\")._rowIsValidated(change) && isCellInvalid\r\n }\r\n },\r\n editorFactory: {\r\n _showRevertButton: function($container) {\r\n if (!$container || !$container.length) {\r\n return\r\n }\r\n var $tooltipElement = this._rowsView.element().find(\".\" + this.addWidgetPrefix(REVERT_TOOLTIP_CLASS));\r\n var $overlayContainer = $container.closest(\".\".concat(this.addWidgetPrefix(CONTENT_CLASS)));\r\n $tooltipElement && $tooltipElement.remove();\r\n $tooltipElement = $(\"
\").addClass(this.addWidgetPrefix(REVERT_TOOLTIP_CLASS)).appendTo($container);\r\n var tooltipOptions = {\r\n animation: null,\r\n visible: true,\r\n width: \"auto\",\r\n height: \"auto\",\r\n shading: false,\r\n container: $overlayContainer,\r\n propagateOutsideClick: true,\r\n hideOnOutsideClick: false,\r\n copyRootClassesToWrapper: true,\r\n _ignoreCopyRootClassesToWrapperDeprecation: true,\r\n contentTemplate: () => {\r\n var $buttonElement = $(\"