devextreme-react 25.1.1-alpha → 25.1.3

package/cjs/card-view.js

@@ -0,0 +1,1422 @@
+/*!
+ * devextreme-react
+ * Version: 25.1.3
+ * Build date: Wed Jun 25 2025
+ *
+ * Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED
+ *
+ * This software may be modified and distributed under the terms
+ * of the MIT license. See the LICENSE file in the root of the project for details.
+ *
+ * https://github.com/DevExpress/devextreme-react
+ */
+
+"use client";
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.My = exports.Lookup = exports.LoadPanel = exports.Label = exports.Item = exports.Hide = exports.HeaderPanel = exports.HeaderFilter = exports.GroupOperationDescriptions = exports.GroupItem = exports.From = exports.FormItem = exports.Format = exports.Form = exports.FilterPanelTexts = exports.FilterPanel = exports.FilterOperationDescriptions = exports.FilterBuilder = exports.Field = exports.EmptyItem = exports.EmailRule = exports.EditingTexts = exports.Editing = exports.Dragging = exports.CustomRule = exports.CustomOperation = exports.CompareRule = exports.ColumnHeaderFilterSearch = exports.ColumnHeaderFilter = exports.ColumnChooserSelection = exports.ColumnChooserSearch = exports.ColumnChooser = exports.Column = exports.Collision = exports.ColCountByScreen = exports.Change = exports.CardViewSelection = exports.CardViewHeaderFilterTexts = exports.CardViewHeaderFilterSearch = exports.CardViewHeaderFilter = exports.CardHeaderItem = exports.CardHeader = exports.CardCover = exports.ButtonOptions = exports.ButtonItem = exports.BoundaryOffset = exports.At = exports.AsyncRule = exports.Animation = exports.CardView = void 0;
+exports.ValidationRule = exports.ToolbarItem = exports.Toolbar = exports.To = exports.Texts = exports.TabPanelOptionsItem = exports.TabPanelOptions = exports.TabbedItem = exports.Tab = exports.StringLengthRule = exports.Sorting = exports.SimpleItem = exports.Show = exports.Selection = exports.SearchPanel = exports.Search = exports.Scrolling = exports.RequiredRule = exports.RemoteOperations = exports.RangeRule = exports.Position = exports.PatternRule = exports.Paging = exports.Pager = exports.Offset = exports.NumericRule = void 0;
+const React = __importStar(require("react"));
+const react_1 = require("react");
+const card_view_1 = __importDefault(require("devextreme/ui/card_view"));
+const component_1 = require("./core/component");
+const nested_option_1 = __importDefault(require("./core/nested-option"));
+const CardView = (0, react_1.memo)((0, react_1.forwardRef)((props, ref) => {
+    const baseRef = (0, react_1.useRef)(null);
+    (0, react_1.useImperativeHandle)(ref, () => ({
+        instance() {
+            return baseRef.current?.getInstance();
+        }
+    }), [baseRef.current]);
+    const subscribableOptions = (0, react_1.useMemo)(() => (["filterValue", "selectedCardKeys", "filterBuilder.value", "filterPanel.filterEnabled", "editing.form.formData", "loadPanel.position", "loadPanel.visible", "paging.pageIndex", "paging.pageSize", "searchPanel.text"]), []);
+    const independentEvents = (0, react_1.useMemo)(() => (["onCardClick", "onCardDblClick", "onCardInserted", "onCardInserting", "onCardPrepared", "onCardRemoved", "onCardRemoving", "onCardSaved", "onCardSaving", "onCardUpdated", "onCardUpdating", "onContentReady", "onContextMenuPreparing", "onDataErrorOccurred", "onDisposing", "onEditCanceled", "onEditCanceling", "onEditingStart", "onFieldCaptionClick", "onFieldCaptionDblClick", "onFieldCaptionPrepared", "onFieldValueClick", "onFieldValueDblClick", "onFieldValuePrepared", "onInitialized", "onInitNewCard"]), []);
+    const defaults = (0, react_1.useMemo)(() => ({
+        defaultFilterValue: "filterValue",
+        defaultSelectedCardKeys: "selectedCardKeys",
+    }), []);
+    const expectedChildren = (0, react_1.useMemo)(() => ({
+        cardCover: { optionName: "cardCover", isCollectionItem: false },
+        cardHeader: { optionName: "cardHeader", isCollectionItem: false },
+        cardViewHeaderFilter: { optionName: "headerFilter", isCollectionItem: false },
+        cardViewSelection: { optionName: "selection", isCollectionItem: false },
+        column: { optionName: "columns", isCollectionItem: true },
+        columnChooser: { optionName: "columnChooser", isCollectionItem: false },
+        editing: { optionName: "editing", isCollectionItem: false },
+        filterBuilder: { optionName: "filterBuilder", isCollectionItem: false },
+        filterPanel: { optionName: "filterPanel", isCollectionItem: false },
+        headerFilter: { optionName: "headerFilter", isCollectionItem: false },
+        headerPanel: { optionName: "headerPanel", isCollectionItem: false },
+        loadPanel: { optionName: "loadPanel", isCollectionItem: false },
+        pager: { optionName: "pager", isCollectionItem: false },
+        paging: { optionName: "paging", isCollectionItem: false },
+        remoteOperations: { optionName: "remoteOperations", isCollectionItem: false },
+        scrolling: { optionName: "scrolling", isCollectionItem: false },
+        searchPanel: { optionName: "searchPanel", isCollectionItem: false },
+        selection: { optionName: "selection", isCollectionItem: false },
+        sorting: { optionName: "sorting", isCollectionItem: false },
+        toolbar: { optionName: "toolbar", isCollectionItem: false }
+    }), []);
+    const templateProps = (0, react_1.useMemo)(() => ([
+        {
+            tmplOption: "cardContentTemplate",
+            render: "cardContentRender",
+            component: "cardContentComponent"
+        },
+        {
+            tmplOption: "cardFooterTemplate",
+            render: "cardFooterRender",
+            component: "cardFooterComponent"
+        },
+        {
+            tmplOption: "cardTemplate",
+            render: "cardRender",
+            component: "cardComponent"
+        },
+        {
+            tmplOption: "noDataTemplate",
+            render: "noDataRender",
+            component: "noDataComponent"
+        },
+    ]), []);
+    return (React.createElement((component_1.Component), {
+        WidgetClass: card_view_1.default,
+        ref: baseRef,
+        subscribableOptions,
+        independentEvents,
+        defaults,
+        expectedChildren,
+        templateProps,
+        ...props,
+    }));
+}));
+exports.CardView = CardView;
+const _componentAnimation = (props) => {
+    return React.createElement((nested_option_1.default), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "animation",
+            ExpectedChildren: {
+                hide: { optionName: "hide", isCollectionItem: false },
+                show: { optionName: "show", isCollectionItem: false }
+            },
+        },
+    });
+};
+const Animation = Object.assign(_componentAnimation, {
+    componentType: "option",
+});
+exports.Animation = Animation;
+const _componentAsyncRule = (props) => {
+    return React.createElement((nested_option_1.default), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "validationRules",
+            IsCollectionItem: true,
+            PredefinedProps: {
+                type: "async"
+            },
+        },
+    });
+};
+const AsyncRule = Object.assign(_componentAsyncRule, {
+    componentType: "option",
+});
+exports.AsyncRule = AsyncRule;
+const _componentAt = (props) => {
+    return React.createElement((nested_option_1.default), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "at",
+        },
+    });
+};
+const At = Object.assign(_componentAt, {
+    componentType: "option",
+});
+exports.At = At;
+const _componentBoundaryOffset = (props) => {
+    return React.createElement((nested_option_1.default), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "boundaryOffset",
+        },
+    });
+};
+const BoundaryOffset = Object.assign(_componentBoundaryOffset, {
+    componentType: "option",
+});
+exports.BoundaryOffset = BoundaryOffset;
+const _componentButtonItem = (props) => {
+    return React.createElement((nested_option_1.default), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "items",
+            IsCollectionItem: true,
+            ExpectedChildren: {
+                buttonOptions: { optionName: "buttonOptions", isCollectionItem: false }
+            },
+            PredefinedProps: {
+                itemType: "button"
+            },
+        },
+    });
+};
+const ButtonItem = Object.assign(_componentButtonItem, {
+    componentType: "option",
+});
+exports.ButtonItem = ButtonItem;
+const _componentButtonOptions = (props) => {
+    return React.createElement((nested_option_1.default), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "buttonOptions",
+            TemplateProps: [{
+                    tmplOption: "template",
+                    render: "render",
+                    component: "component"
+                }],
+        },
+    });
+};
+const ButtonOptions = Object.assign(_componentButtonOptions, {
+    componentType: "option",
+});
+exports.ButtonOptions = ButtonOptions;
+const _componentCardCover = (props) => {
+    return React.createElement((nested_option_1.default), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "cardCover",
+            TemplateProps: [{
+                    tmplOption: "template",
+                    render: "render",
+                    component: "component"
+                }],
+        },
+    });
+};
+const CardCover = Object.assign(_componentCardCover, {
+    componentType: "option",
+});
+exports.CardCover = CardCover;
+const _componentCardHeader = (props) => {
+    return React.createElement((nested_option_1.default), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "cardHeader",
+            ExpectedChildren: {
+                cardHeaderItem: { optionName: "items", isCollectionItem: true },
+                item: { optionName: "items", isCollectionItem: true }
+            },
+            TemplateProps: [{
+                    tmplOption: "template",
+                    render: "render",
+                    component: "component"
+                }],
+        },
+    });
+};
+const CardHeader = Object.assign(_componentCardHeader, {
+    componentType: "option",
+});
+exports.CardHeader = CardHeader;
+const _componentCardHeaderItem = (props) => {
+    return React.createElement((nested_option_1.default), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "items",
+            IsCollectionItem: true,
+            TemplateProps: [{
+                    tmplOption: "menuItemTemplate",
+                    render: "menuItemRender",
+                    component: "menuItemComponent"
+                }, {
+                    tmplOption: "template",
+                    render: "render",
+                    component: "component"
+                }],
+        },
+    });
+};
+const CardHeaderItem = Object.assign(_componentCardHeaderItem, {
+    componentType: "option",
+});
+exports.CardHeaderItem = CardHeaderItem;
+const _componentCardViewHeaderFilter = (props) => {
+    return React.createElement((nested_option_1.default), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "headerFilter",
+            ExpectedChildren: {
+                cardViewHeaderFilterSearch: { optionName: "search", isCollectionItem: false },
+                cardViewHeaderFilterTexts: { optionName: "texts", isCollectionItem: false },
+                search: { optionName: "search", isCollectionItem: false },
+                texts: { optionName: "texts", isCollectionItem: false }
+            },
+        },
+    });
+};
+const CardViewHeaderFilter = Object.assign(_componentCardViewHeaderFilter, {
+    componentType: "option",
+});
+exports.CardViewHeaderFilter = CardViewHeaderFilter;
+const _componentCardViewHeaderFilterSearch = (props) => {
+    return React.createElement((nested_option_1.default), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "search",
+        },
+    });
+};
+const CardViewHeaderFilterSearch = Object.assign(_componentCardViewHeaderFilterSearch, {
+    componentType: "option",
+});
+exports.CardViewHeaderFilterSearch = CardViewHeaderFilterSearch;
+const _componentCardViewHeaderFilterTexts = (props) => {
+    return React.createElement((nested_option_1.default), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "texts",
+        },
+    });
+};
+const CardViewHeaderFilterTexts = Object.assign(_componentCardViewHeaderFilterTexts, {
+    componentType: "option",
+});
+exports.CardViewHeaderFilterTexts = CardViewHeaderFilterTexts;
+const _componentCardViewSelection = (props) => {
+    return React.createElement((nested_option_1.default), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "selection",
+        },
+    });
+};
+const CardViewSelection = Object.assign(_componentCardViewSelection, {
+    componentType: "option",
+});
+exports.CardViewSelection = CardViewSelection;
+const _componentChange = (props) => {
+    return React.createElement((nested_option_1.default), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "changes",
+            IsCollectionItem: true,
+        },
+    });
+};
+const Change = Object.assign(_componentChange, {
+    componentType: "option",
+});
+exports.Change = Change;
+const _componentColCountByScreen = (props) => {
+    return React.createElement((nested_option_1.default), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "colCountByScreen",
+        },
+    });
+};
+const ColCountByScreen = Object.assign(_componentColCountByScreen, {
+    componentType: "option",
+});
+exports.ColCountByScreen = ColCountByScreen;
+const _componentCollision = (props) => {
+    return React.createElement((nested_option_1.default), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "collision",
+        },
+    });
+};
+const Collision = Object.assign(_componentCollision, {
+    componentType: "option",
+});
+exports.Collision = Collision;
+const _componentColumn = (props) => {
+    return React.createElement((nested_option_1.default), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "columns",
+            IsCollectionItem: true,
+            DefaultsProps: {
+                defaultFilterValue: "filterValue",
+                defaultFilterValues: "filterValues",
+                defaultSortIndex: "sortIndex",
+                defaultSortOrder: "sortOrder",
+                defaultVisible: "visible",
+                defaultVisibleIndex: "visibleIndex"
+            },
+            ExpectedChildren: {
+                AsyncRule: { optionName: "validationRules", isCollectionItem: true },
+                columnHeaderFilter: { optionName: "headerFilter", isCollectionItem: false },
+                CompareRule: { optionName: "validationRules", isCollectionItem: true },
+                CustomRule: { optionName: "validationRules", isCollectionItem: true },
+                EmailRule: { optionName: "validationRules", isCollectionItem: true },
+                format: { optionName: "format", isCollectionItem: false },
+                formItem: { optionName: "formItem", isCollectionItem: false },
+                headerFilter: { optionName: "headerFilter", isCollectionItem: false },
+                NumericRule: { optionName: "validationRules", isCollectionItem: true },
+                PatternRule: { optionName: "validationRules", isCollectionItem: true },
+                RangeRule: { optionName: "validationRules", isCollectionItem: true },
+                RequiredRule: { optionName: "validationRules", isCollectionItem: true },
+                StringLengthRule: { optionName: "validationRules", isCollectionItem: true },
+                validationRule: { optionName: "validationRules", isCollectionItem: true }
+            },
+            TemplateProps: [{
+                    tmplOption: "fieldCaptionTemplate",
+                    render: "fieldCaptionRender",
+                    component: "fieldCaptionComponent"
+                }, {
+                    tmplOption: "fieldTemplate",
+                    render: "fieldRender",
+                    component: "fieldComponent"
+                }, {
+                    tmplOption: "fieldValueTemplate",
+                    render: "fieldValueRender",
+                    component: "fieldValueComponent"
+                }, {
+                    tmplOption: "headerItemTemplate",
+                    render: "headerItemRender",
+                    component: "headerItemComponent"
+                }],
+        },
+    });
+};
+const Column = Object.assign(_componentColumn, {
+    componentType: "option",
+});
+exports.Column = Column;
+const _componentColumnChooser = (props) => {
+    return React.createElement((nested_option_1.default), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "columnChooser",
+            ExpectedChildren: {
+                columnChooserSearch: { optionName: "search", isCollectionItem: false },
+                columnChooserSelection: { optionName: "selection", isCollectionItem: false },
+                position: { optionName: "position", isCollectionItem: false },
+                search: { optionName: "search", isCollectionItem: false },
+                selection: { optionName: "selection", isCollectionItem: false }
+            },
+        },
+    });
+};
+const ColumnChooser = Object.assign(_componentColumnChooser, {
+    componentType: "option",
+});
+exports.ColumnChooser = ColumnChooser;
+const _componentColumnChooserSearch = (props) => {
+    return React.createElement((nested_option_1.default), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "search",
+        },
+    });
+};
+const ColumnChooserSearch = Object.assign(_componentColumnChooserSearch, {
+    componentType: "option",
+});
+exports.ColumnChooserSearch = ColumnChooserSearch;
+const _componentColumnChooserSelection = (props) => {
+    return React.createElement((nested_option_1.default), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "selection",
+        },
+    });
+};
+const ColumnChooserSelection = Object.assign(_componentColumnChooserSelection, {
+    componentType: "option",
+});
+exports.ColumnChooserSelection = ColumnChooserSelection;
+const _componentColumnHeaderFilter = (props) => {
+    return React.createElement((nested_option_1.default), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "headerFilter",
+            ExpectedChildren: {
+                columnHeaderFilterSearch: { optionName: "search", isCollectionItem: false },
+                search: { optionName: "search", isCollectionItem: false }
+            },
+        },
+    });
+};
+const ColumnHeaderFilter = Object.assign(_componentColumnHeaderFilter, {
+    componentType: "option",
+});
+exports.ColumnHeaderFilter = ColumnHeaderFilter;
+const _componentColumnHeaderFilterSearch = (props) => {
+    return React.createElement((nested_option_1.default), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "search",
+        },
+    });
+};
+const ColumnHeaderFilterSearch = Object.assign(_componentColumnHeaderFilterSearch, {
+    componentType: "option",
+});
+exports.ColumnHeaderFilterSearch = ColumnHeaderFilterSearch;
+const _componentCompareRule = (props) => {
+    return React.createElement((nested_option_1.default), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "validationRules",
+            IsCollectionItem: true,
+            PredefinedProps: {
+                type: "compare"
+            },
+        },
+    });
+};
+const CompareRule = Object.assign(_componentCompareRule, {
+    componentType: "option",
+});
+exports.CompareRule = CompareRule;
+const _componentCustomOperation = (props) => {
+    return React.createElement((nested_option_1.default), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "customOperations",
+            IsCollectionItem: true,
+            TemplateProps: [{
+                    tmplOption: "editorTemplate",
+                    render: "editorRender",
+                    component: "editorComponent"
+                }],
+        },
+    });
+};
+const CustomOperation = Object.assign(_componentCustomOperation, {
+    componentType: "option",
+});
+exports.CustomOperation = CustomOperation;
+const _componentCustomRule = (props) => {
+    return React.createElement((nested_option_1.default), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "validationRules",
+            IsCollectionItem: true,
+            PredefinedProps: {
+                type: "custom"
+            },
+        },
+    });
+};
+const CustomRule = Object.assign(_componentCustomRule, {
+    componentType: "option",
+});
+exports.CustomRule = CustomRule;
+const _componentDragging = (props) => {
+    return React.createElement((nested_option_1.default), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "dragging",
+        },
+    });
+};
+const Dragging = Object.assign(_componentDragging, {
+    componentType: "option",
+});
+exports.Dragging = Dragging;
+const _componentEditing = (props) => {
+    return React.createElement((nested_option_1.default), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "editing",
+            ExpectedChildren: {
+                change: { optionName: "changes", isCollectionItem: true },
+                editingTexts: { optionName: "texts", isCollectionItem: false },
+                form: { optionName: "form", isCollectionItem: false },
+                texts: { optionName: "texts", isCollectionItem: false }
+            },
+        },
+    });
+};
+const Editing = Object.assign(_componentEditing, {
+    componentType: "option",
+});
+exports.Editing = Editing;
+const _componentEditingTexts = (props) => {
+    return React.createElement((nested_option_1.default), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "texts",
+        },
+    });
+};
+const EditingTexts = Object.assign(_componentEditingTexts, {
+    componentType: "option",
+});
+exports.EditingTexts = EditingTexts;
+const _componentEmailRule = (props) => {
+    return React.createElement((nested_option_1.default), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "validationRules",
+            IsCollectionItem: true,
+            PredefinedProps: {
+                type: "email"
+            },
+        },
+    });
+};
+const EmailRule = Object.assign(_componentEmailRule, {
+    componentType: "option",
+});
+exports.EmailRule = EmailRule;
+const _componentEmptyItem = (props) => {
+    return React.createElement((nested_option_1.default), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "items",
+            IsCollectionItem: true,
+            PredefinedProps: {
+                itemType: "empty"
+            },
+        },
+    });
+};
+const EmptyItem = Object.assign(_componentEmptyItem, {
+    componentType: "option",
+});
+exports.EmptyItem = EmptyItem;
+const _componentField = (props) => {
+    return React.createElement((nested_option_1.default), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "fields",
+            IsCollectionItem: true,
+            ExpectedChildren: {
+                format: { optionName: "format", isCollectionItem: false },
+                lookup: { optionName: "lookup", isCollectionItem: false }
+            },
+            TemplateProps: [{
+                    tmplOption: "editorTemplate",
+                    render: "editorRender",
+                    component: "editorComponent"
+                }],
+        },
+    });
+};
+const Field = Object.assign(_componentField, {
+    componentType: "option",
+});
+exports.Field = Field;
+const _componentFilterBuilder = (props) => {
+    return React.createElement((nested_option_1.default), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "filterBuilder",
+            DefaultsProps: {
+                defaultValue: "value"
+            },
+            ExpectedChildren: {
+                customOperation: { optionName: "customOperations", isCollectionItem: true },
+                field: { optionName: "fields", isCollectionItem: true },
+                filterOperationDescriptions: { optionName: "filterOperationDescriptions", isCollectionItem: false },
+                groupOperationDescriptions: { optionName: "groupOperationDescriptions", isCollectionItem: false }
+            },
+        },
+    });
+};
+const FilterBuilder = Object.assign(_componentFilterBuilder, {
+    componentType: "option",
+});
+exports.FilterBuilder = FilterBuilder;
+const _componentFilterOperationDescriptions = (props) => {
+    return React.createElement((nested_option_1.default), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "filterOperationDescriptions",
+        },
+    });
+};
+const FilterOperationDescriptions = Object.assign(_componentFilterOperationDescriptions, {
+    componentType: "option",
+});
+exports.FilterOperationDescriptions = FilterOperationDescriptions;
+const _componentFilterPanel = (props) => {
+    return React.createElement((nested_option_1.default), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "filterPanel",
+            DefaultsProps: {
+                defaultFilterEnabled: "filterEnabled"
+            },
+            ExpectedChildren: {
+                filterPanelTexts: { optionName: "texts", isCollectionItem: false },
+                texts: { optionName: "texts", isCollectionItem: false }
+            },
+        },
+    });
+};
+const FilterPanel = Object.assign(_componentFilterPanel, {
+    componentType: "option",
+});
+exports.FilterPanel = FilterPanel;
+const _componentFilterPanelTexts = (props) => {
+    return React.createElement((nested_option_1.default), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "texts",
+        },
+    });
+};
+const FilterPanelTexts = Object.assign(_componentFilterPanelTexts, {
+    componentType: "option",
+});
+exports.FilterPanelTexts = FilterPanelTexts;
+const _componentForm = (props) => {
+    return React.createElement((nested_option_1.default), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "form",
+            DefaultsProps: {
+                defaultFormData: "formData"
+            },
+            ExpectedChildren: {
+                ButtonItem: { optionName: "items", isCollectionItem: true },
+                colCountByScreen: { optionName: "colCountByScreen", isCollectionItem: false },
+                EmptyItem: { optionName: "items", isCollectionItem: true },
+                GroupItem: { optionName: "items", isCollectionItem: true },
+                item: { optionName: "items", isCollectionItem: true },
+                SimpleItem: { optionName: "items", isCollectionItem: true },
+                TabbedItem: { optionName: "items", isCollectionItem: true }
+            },
+        },
+    });
+};
+const Form = Object.assign(_componentForm, {
+    componentType: "option",
+});
+exports.Form = Form;
+const _componentFormat = (props) => {
+    return React.createElement((nested_option_1.default), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "format",
+        },
+    });
+};
+const Format = Object.assign(_componentFormat, {
+    componentType: "option",
+});
+exports.Format = Format;
+const _componentFormItem = (props) => {
+    return React.createElement((nested_option_1.default), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "formItem",
+            ExpectedChildren: {
+                AsyncRule: { optionName: "validationRules", isCollectionItem: true },
+                CompareRule: { optionName: "validationRules", isCollectionItem: true },
+                CustomRule: { optionName: "validationRules", isCollectionItem: true },
+                EmailRule: { optionName: "validationRules", isCollectionItem: true },
+                label: { optionName: "label", isCollectionItem: false },
+                NumericRule: { optionName: "validationRules", isCollectionItem: true },
+                PatternRule: { optionName: "validationRules", isCollectionItem: true },
+                RangeRule: { optionName: "validationRules", isCollectionItem: true },
+                RequiredRule: { optionName: "validationRules", isCollectionItem: true },
+                StringLengthRule: { optionName: "validationRules", isCollectionItem: true },
+                validationRule: { optionName: "validationRules", isCollectionItem: true }
+            },
+            TemplateProps: [{
+                    tmplOption: "template",
+                    render: "render",
+                    component: "component"
+                }],
+        },
+    });
+};
+const FormItem = Object.assign(_componentFormItem, {
+    componentType: "option",
+});
+exports.FormItem = FormItem;
+const _componentFrom = (props) => {
+    return React.createElement((nested_option_1.default), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "from",
+            ExpectedChildren: {
+                position: { optionName: "position", isCollectionItem: false }
+            },
+        },
+    });
+};
+const From = Object.assign(_componentFrom, {
+    componentType: "option",
+});
+exports.From = From;
+const _componentGroupItem = (props) => {
+    return React.createElement((nested_option_1.default), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "items",
+            IsCollectionItem: true,
+            ExpectedChildren: {
+                colCountByScreen: { optionName: "colCountByScreen", isCollectionItem: false }
+            },
+            TemplateProps: [{
+                    tmplOption: "captionTemplate",
+                    render: "captionRender",
+                    component: "captionComponent"
+                }, {
+                    tmplOption: "template",
+                    render: "render",
+                    component: "component"
+                }],
+            PredefinedProps: {
+                itemType: "group"
+            },
+        },
+    });
+};
+const GroupItem = Object.assign(_componentGroupItem, {
+    componentType: "option",
+});
+exports.GroupItem = GroupItem;
+const _componentGroupOperationDescriptions = (props) => {
+    return React.createElement((nested_option_1.default), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "groupOperationDescriptions",
+        },
+    });
+};
+const GroupOperationDescriptions = Object.assign(_componentGroupOperationDescriptions, {
+    componentType: "option",
+});
+exports.GroupOperationDescriptions = GroupOperationDescriptions;
+const _componentHeaderFilter = (props) => {
+    return React.createElement((nested_option_1.default), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "headerFilter",
+            ExpectedChildren: {
+                cardViewHeaderFilterSearch: { optionName: "search", isCollectionItem: false },
+                cardViewHeaderFilterTexts: { optionName: "texts", isCollectionItem: false },
+                columnHeaderFilterSearch: { optionName: "search", isCollectionItem: false },
+                search: { optionName: "search", isCollectionItem: false }
+            },
+        },
+    });
+};
+const HeaderFilter = Object.assign(_componentHeaderFilter, {
+    componentType: "option",
+});
+exports.HeaderFilter = HeaderFilter;
+const _componentHeaderPanel = (props) => {
+    return React.createElement((nested_option_1.default), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "headerPanel",
+            ExpectedChildren: {
+                dragging: { optionName: "dragging", isCollectionItem: false }
+            },
+            TemplateProps: [{
+                    tmplOption: "itemTemplate",
+                    render: "itemRender",
+                    component: "itemComponent"
+                }],
+        },
+    });
+};
+const HeaderPanel = Object.assign(_componentHeaderPanel, {
+    componentType: "option",
+});
+exports.HeaderPanel = HeaderPanel;
+const _componentHide = (props) => {
+    return React.createElement((nested_option_1.default), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "hide",
+            ExpectedChildren: {
+                from: { optionName: "from", isCollectionItem: false },
+                to: { optionName: "to", isCollectionItem: false }
+            },
+        },
+    });
+};
+const Hide = Object.assign(_componentHide, {
+    componentType: "option",
+});
+exports.Hide = Hide;
+const _componentItem = (props) => {
+    return React.createElement((nested_option_1.default), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "items",
+            IsCollectionItem: true,
+            ExpectedChildren: {
+                AsyncRule: { optionName: "validationRules", isCollectionItem: true },
+                buttonOptions: { optionName: "buttonOptions", isCollectionItem: false },
+                colCountByScreen: { optionName: "colCountByScreen", isCollectionItem: false },
+                CompareRule: { optionName: "validationRules", isCollectionItem: true },
+                CustomRule: { optionName: "validationRules", isCollectionItem: true },
+                EmailRule: { optionName: "validationRules", isCollectionItem: true },
+                label: { optionName: "label", isCollectionItem: false },
+                NumericRule: { optionName: "validationRules", isCollectionItem: true },
+                PatternRule: { optionName: "validationRules", isCollectionItem: true },
+                RangeRule: { optionName: "validationRules", isCollectionItem: true },
+                RequiredRule: { optionName: "validationRules", isCollectionItem: true },
+                StringLengthRule: { optionName: "validationRules", isCollectionItem: true },
+                tab: { optionName: "tabs", isCollectionItem: true },
+                tabPanelOptions: { optionName: "tabPanelOptions", isCollectionItem: false },
+                validationRule: { optionName: "validationRules", isCollectionItem: true }
+            },
+            TemplateProps: [{
+                    tmplOption: "menuItemTemplate",
+                    render: "menuItemRender",
+                    component: "menuItemComponent"
+                }, {
+                    tmplOption: "template",
+                    render: "render",
+                    component: "component"
+                }, {
+                    tmplOption: "tabTemplate",
+                    render: "tabRender",
+                    component: "tabComponent"
+                }, {
+                    tmplOption: "captionTemplate",
+                    render: "captionRender",
+                    component: "captionComponent"
+                }],
+        },
+    });
+};
+const Item = Object.assign(_componentItem, {
+    componentType: "option",
+});
+exports.Item = Item;
+const _componentLabel = (props) => {
+    return React.createElement((nested_option_1.default), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "label",
+            TemplateProps: [{
+                    tmplOption: "template",
+                    render: "render",
+                    component: "component"
+                }],
+        },
+    });
+};
+const Label = Object.assign(_componentLabel, {
+    componentType: "option",
+});
+exports.Label = Label;
+const _componentLoadPanel = (props) => {
+    return React.createElement((nested_option_1.default), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "loadPanel",
+            DefaultsProps: {
+                defaultPosition: "position",
+                defaultVisible: "visible"
+            },
+            ExpectedChildren: {
+                animation: { optionName: "animation", isCollectionItem: false },
+                position: { optionName: "position", isCollectionItem: false }
+            },
+        },
+    });
+};
+const LoadPanel = Object.assign(_componentLoadPanel, {
+    componentType: "option",
+});
+exports.LoadPanel = LoadPanel;
+const _componentLookup = (props) => {
+    return React.createElement((nested_option_1.default), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "lookup",
+        },
+    });
+};
+const Lookup = Object.assign(_componentLookup, {
+    componentType: "option",
+});
+exports.Lookup = Lookup;
+const _componentMy = (props) => {
+    return React.createElement((nested_option_1.default), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "my",
+        },
+    });
+};
+const My = Object.assign(_componentMy, {
+    componentType: "option",
+});
+exports.My = My;
+const _componentNumericRule = (props) => {
+    return React.createElement((nested_option_1.default), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "validationRules",
+            IsCollectionItem: true,
+            PredefinedProps: {
+                type: "numeric"
+            },
+        },
+    });
+};
+const NumericRule = Object.assign(_componentNumericRule, {
+    componentType: "option",
+});
+exports.NumericRule = NumericRule;
+const _componentOffset = (props) => {
+    return React.createElement((nested_option_1.default), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "offset",
+        },
+    });
+};
+const Offset = Object.assign(_componentOffset, {
+    componentType: "option",
+});
+exports.Offset = Offset;
+const _componentPager = (props) => {
+    return React.createElement((nested_option_1.default), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "pager",
+        },
+    });
+};
+const Pager = Object.assign(_componentPager, {
+    componentType: "option",
+});
+exports.Pager = Pager;
+const _componentPaging = (props) => {
+    return React.createElement((nested_option_1.default), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "paging",
+            DefaultsProps: {
+                defaultPageIndex: "pageIndex",
+                defaultPageSize: "pageSize"
+            },
+        },
+    });
+};
+const Paging = Object.assign(_componentPaging, {
+    componentType: "option",
+});
+exports.Paging = Paging;
+const _componentPatternRule = (props) => {
+    return React.createElement((nested_option_1.default), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "validationRules",
+            IsCollectionItem: true,
+            PredefinedProps: {
+                type: "pattern"
+            },
+        },
+    });
+};
+const PatternRule = Object.assign(_componentPatternRule, {
+    componentType: "option",
+});
+exports.PatternRule = PatternRule;
+const _componentPosition = (props) => {
+    return React.createElement((nested_option_1.default), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "position",
+            ExpectedChildren: {
+                at: { optionName: "at", isCollectionItem: false },
+                boundaryOffset: { optionName: "boundaryOffset", isCollectionItem: false },
+                collision: { optionName: "collision", isCollectionItem: false },
+                my: { optionName: "my", isCollectionItem: false },
+                offset: { optionName: "offset", isCollectionItem: false }
+            },
+        },
+    });
+};
+const Position = Object.assign(_componentPosition, {
+    componentType: "option",
+});
+exports.Position = Position;
+const _componentRangeRule = (props) => {
+    return React.createElement((nested_option_1.default), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "validationRules",
+            IsCollectionItem: true,
+            PredefinedProps: {
+                type: "range"
+            },
+        },
+    });
+};
+const RangeRule = Object.assign(_componentRangeRule, {
+    componentType: "option",
+});
+exports.RangeRule = RangeRule;
+const _componentRemoteOperations = (props) => {
+    return React.createElement((nested_option_1.default), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "remoteOperations",
+        },
+    });
+};
+const RemoteOperations = Object.assign(_componentRemoteOperations, {
+    componentType: "option",
+});
+exports.RemoteOperations = RemoteOperations;
+const _componentRequiredRule = (props) => {
+    return React.createElement((nested_option_1.default), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "validationRules",
+            IsCollectionItem: true,
+            PredefinedProps: {
+                type: "required"
+            },
+        },
+    });
+};
+const RequiredRule = Object.assign(_componentRequiredRule, {
+    componentType: "option",
+});
+exports.RequiredRule = RequiredRule;
+const _componentScrolling = (props) => {
+    return React.createElement((nested_option_1.default), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "scrolling",
+        },
+    });
+};
+const Scrolling = Object.assign(_componentScrolling, {
+    componentType: "option",
+});
+exports.Scrolling = Scrolling;
+const _componentSearch = (props) => {
+    return React.createElement((nested_option_1.default), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "search",
+        },
+    });
+};
+const Search = Object.assign(_componentSearch, {
+    componentType: "option",
+});
+exports.Search = Search;
+const _componentSearchPanel = (props) => {
+    return React.createElement((nested_option_1.default), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "searchPanel",
+            DefaultsProps: {
+                defaultText: "text"
+            },
+        },
+    });
+};
+const SearchPanel = Object.assign(_componentSearchPanel, {
+    componentType: "option",
+});
+exports.SearchPanel = SearchPanel;
+const _componentSelection = (props) => {
+    return React.createElement((nested_option_1.default), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "selection",
+        },
+    });
+};
+const Selection = Object.assign(_componentSelection, {
+    componentType: "option",
+});
+exports.Selection = Selection;
+const _componentShow = (props) => {
+    return React.createElement((nested_option_1.default), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "show",
+            ExpectedChildren: {
+                from: { optionName: "from", isCollectionItem: false },
+                to: { optionName: "to", isCollectionItem: false }
+            },
+        },
+    });
+};
+const Show = Object.assign(_componentShow, {
+    componentType: "option",
+});
+exports.Show = Show;
+const _componentSimpleItem = (props) => {
+    return React.createElement((nested_option_1.default), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "items",
+            IsCollectionItem: true,
+            ExpectedChildren: {
+                AsyncRule: { optionName: "validationRules", isCollectionItem: true },
+                CompareRule: { optionName: "validationRules", isCollectionItem: true },
+                CustomRule: { optionName: "validationRules", isCollectionItem: true },
+                EmailRule: { optionName: "validationRules", isCollectionItem: true },
+                label: { optionName: "label", isCollectionItem: false },
+                NumericRule: { optionName: "validationRules", isCollectionItem: true },
+                PatternRule: { optionName: "validationRules", isCollectionItem: true },
+                RangeRule: { optionName: "validationRules", isCollectionItem: true },
+                RequiredRule: { optionName: "validationRules", isCollectionItem: true },
+                StringLengthRule: { optionName: "validationRules", isCollectionItem: true },
+                validationRule: { optionName: "validationRules", isCollectionItem: true }
+            },
+            TemplateProps: [{
+                    tmplOption: "template",
+                    render: "render",
+                    component: "component"
+                }],
+            PredefinedProps: {
+                itemType: "simple"
+            },
+        },
+    });
+};
+const SimpleItem = Object.assign(_componentSimpleItem, {
+    componentType: "option",
+});
+exports.SimpleItem = SimpleItem;
+const _componentSorting = (props) => {
+    return React.createElement((nested_option_1.default), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "sorting",
+        },
+    });
+};
+const Sorting = Object.assign(_componentSorting, {
+    componentType: "option",
+});
+exports.Sorting = Sorting;
+const _componentStringLengthRule = (props) => {
+    return React.createElement((nested_option_1.default), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "validationRules",
+            IsCollectionItem: true,
+            PredefinedProps: {
+                type: "stringLength"
+            },
+        },
+    });
+};
+const StringLengthRule = Object.assign(_componentStringLengthRule, {
+    componentType: "option",
+});
+exports.StringLengthRule = StringLengthRule;
+const _componentTab = (props) => {
+    return React.createElement((nested_option_1.default), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "tabs",
+            IsCollectionItem: true,
+            ExpectedChildren: {
+                colCountByScreen: { optionName: "colCountByScreen", isCollectionItem: false }
+            },
+            TemplateProps: [{
+                    tmplOption: "tabTemplate",
+                    render: "tabRender",
+                    component: "tabComponent"
+                }, {
+                    tmplOption: "template",
+                    render: "render",
+                    component: "component"
+                }],
+        },
+    });
+};
+const Tab = Object.assign(_componentTab, {
+    componentType: "option",
+});
+exports.Tab = Tab;
+const _componentTabbedItem = (props) => {
+    return React.createElement((nested_option_1.default), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "items",
+            IsCollectionItem: true,
+            ExpectedChildren: {
+                tab: { optionName: "tabs", isCollectionItem: true },
+                tabPanelOptions: { optionName: "tabPanelOptions", isCollectionItem: false }
+            },
+            PredefinedProps: {
+                itemType: "tabbed"
+            },
+        },
+    });
+};
+const TabbedItem = Object.assign(_componentTabbedItem, {
+    componentType: "option",
+});
+exports.TabbedItem = TabbedItem;
+const _componentTabPanelOptions = (props) => {
+    return React.createElement((nested_option_1.default), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "tabPanelOptions",
+            DefaultsProps: {
+                defaultItems: "items",
+                defaultSelectedIndex: "selectedIndex",
+                defaultSelectedItem: "selectedItem"
+            },
+            ExpectedChildren: {
+                item: { optionName: "items", isCollectionItem: true },
+                tabPanelOptionsItem: { optionName: "items", isCollectionItem: true }
+            },
+            TemplateProps: [{
+                    tmplOption: "itemTemplate",
+                    render: "itemRender",
+                    component: "itemComponent"
+                }, {
+                    tmplOption: "itemTitleTemplate",
+                    render: "itemTitleRender",
+                    component: "itemTitleComponent"
+                }],
+        },
+    });
+};
+const TabPanelOptions = Object.assign(_componentTabPanelOptions, {
+    componentType: "option",
+});
+exports.TabPanelOptions = TabPanelOptions;
+const _componentTabPanelOptionsItem = (props) => {
+    return React.createElement((nested_option_1.default), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "items",
+            IsCollectionItem: true,
+            TemplateProps: [{
+                    tmplOption: "tabTemplate",
+                    render: "tabRender",
+                    component: "tabComponent"
+                }, {
+                    tmplOption: "template",
+                    render: "render",
+                    component: "component"
+                }],
+        },
+    });
+};
+const TabPanelOptionsItem = Object.assign(_componentTabPanelOptionsItem, {
+    componentType: "option",
+});
+exports.TabPanelOptionsItem = TabPanelOptionsItem;
+const _componentTexts = (props) => {
+    return React.createElement((nested_option_1.default), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "texts",
+        },
+    });
+};
+const Texts = Object.assign(_componentTexts, {
+    componentType: "option",
+});
+exports.Texts = Texts;
+const _componentTo = (props) => {
+    return React.createElement((nested_option_1.default), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "to",
+            ExpectedChildren: {
+                position: { optionName: "position", isCollectionItem: false }
+            },
+        },
+    });
+};
+const To = Object.assign(_componentTo, {
+    componentType: "option",
+});
+exports.To = To;
+const _componentToolbar = (props) => {
+    return React.createElement((nested_option_1.default), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "toolbar",
+            ExpectedChildren: {
+                item: { optionName: "items", isCollectionItem: true },
+                toolbarItem: { optionName: "items", isCollectionItem: true }
+            },
+        },
+    });
+};
+const Toolbar = Object.assign(_componentToolbar, {
+    componentType: "option",
+});
+exports.Toolbar = Toolbar;
+const _componentToolbarItem = (props) => {
+    return React.createElement((nested_option_1.default), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "items",
+            IsCollectionItem: true,
+            TemplateProps: [{
+                    tmplOption: "menuItemTemplate",
+                    render: "menuItemRender",
+                    component: "menuItemComponent"
+                }, {
+                    tmplOption: "template",
+                    render: "render",
+                    component: "component"
+                }],
+        },
+    });
+};
+const ToolbarItem = Object.assign(_componentToolbarItem, {
+    componentType: "option",
+});
+exports.ToolbarItem = ToolbarItem;
+const _componentValidationRule = (props) => {
+    return React.createElement((nested_option_1.default), {
+        ...props,
+        elementDescriptor: {
+            OptionName: "validationRules",
+            IsCollectionItem: true,
+            PredefinedProps: {
+                type: "required"
+            },
+        },
+    });
+};
+const ValidationRule = Object.assign(_componentValidationRule, {
+    componentType: "option",
+});
+exports.ValidationRule = ValidationRule;
+exports.default = CardView;