devextreme-react/esm/card-view.js

DevExtreme React UI and Visualization Components

/*!
 * devextreme-react
 * Version: 25.1.5
 * Build date: Wed Sep 03 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";
import * as React from "react";
import { memo, forwardRef, useImperativeHandle, useRef, useMemo } from "react";
import dxCardView from "devextreme/ui/card_view";
import { Component as BaseComponent } from "./core/component";
import NestedOption from "./core/nested-option";
const CardView = memo(forwardRef((props, ref) => {
    const baseRef = useRef(null);
    useImperativeHandle(ref, () => ({
        instance() {
            return baseRef.current?.getInstance();
        }
    }), []);
    const subscribableOptions = useMemo(() => (["filterValue", "selectedCardKeys", "filterBuilder.value", "filterPanel.filterEnabled", "editing.form.formData", "loadPanel.position", "loadPanel.visible", "paging.pageIndex", "paging.pageSize", "searchPanel.text"]), []);
    const independentEvents = 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 = useMemo(() => ({
        defaultFilterValue: "filterValue",
        defaultSelectedCardKeys: "selectedCardKeys",
    }), []);
    const expectedChildren = 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 = 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((BaseComponent), {
        WidgetClass: dxCardView,
        ref: baseRef,
        subscribableOptions,
        independentEvents,
        defaults,
        expectedChildren,
        templateProps,
        ...props,
    }));
}));
const _componentAnimation = (props) => {
    return React.createElement((NestedOption), {
        ...props,
        elementDescriptor: {
            OptionName: "animation",
            ExpectedChildren: {
                hide: { optionName: "hide", isCollectionItem: false },
                show: { optionName: "show", isCollectionItem: false }
            },
        },
    });
};
const Animation = Object.assign(_componentAnimation, {
    componentType: "option",
});
const _componentAsyncRule = (props) => {
    return React.createElement((NestedOption), {
        ...props,
        elementDescriptor: {
            OptionName: "validationRules",
            IsCollectionItem: true,
            PredefinedProps: {
                type: "async"
            },
        },
    });
};
const AsyncRule = Object.assign(_componentAsyncRule, {
    componentType: "option",
});
const _componentAt = (props) => {
    return React.createElement((NestedOption), {
        ...props,
        elementDescriptor: {
            OptionName: "at",
        },
    });
};
const At = Object.assign(_componentAt, {
    componentType: "option",
});
const _componentBoundaryOffset = (props) => {
    return React.createElement((NestedOption), {
        ...props,
        elementDescriptor: {
            OptionName: "boundaryOffset",
        },
    });
};
const BoundaryOffset = Object.assign(_componentBoundaryOffset, {
    componentType: "option",
});
const _componentButtonItem = (props) => {
    return React.createElement((NestedOption), {
        ...props,
        elementDescriptor: {
            OptionName: "items",
            IsCollectionItem: true,
            ExpectedChildren: {
                buttonOptions: { optionName: "buttonOptions", isCollectionItem: false }
            },
            PredefinedProps: {
                itemType: "button"
            },
        },
    });
};
const ButtonItem = Object.assign(_componentButtonItem, {
    componentType: "option",
});
const _componentButtonOptions = (props) => {
    return React.createElement((NestedOption), {
        ...props,
        elementDescriptor: {
            OptionName: "buttonOptions",
            TemplateProps: [{
                    tmplOption: "template",
                    render: "render",
                    component: "component"
                }],
        },
    });
};
const ButtonOptions = Object.assign(_componentButtonOptions, {
    componentType: "option",
});
const _componentCardCover = (props) => {
    return React.createElement((NestedOption), {
        ...props,
        elementDescriptor: {
            OptionName: "cardCover",
            TemplateProps: [{
                    tmplOption: "template",
                    render: "render",
                    component: "component"
                }],
        },
    });
};
const CardCover = Object.assign(_componentCardCover, {
    componentType: "option",
});
const _componentCardHeader = (props) => {
    return React.createElement((NestedOption), {
        ...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",
});
const _componentCardHeaderItem = (props) => {
    return React.createElement((NestedOption), {
        ...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",
});
const _componentCardViewHeaderFilter = (props) => {
    return React.createElement((NestedOption), {
        ...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",
});
const _componentCardViewHeaderFilterSearch = (props) => {
    return React.createElement((NestedOption), {
        ...props,
        elementDescriptor: {
            OptionName: "search",
        },
    });
};
const CardViewHeaderFilterSearch = Object.assign(_componentCardViewHeaderFilterSearch, {
    componentType: "option",
});
const _componentCardViewHeaderFilterTexts = (props) => {
    return React.createElement((NestedOption), {
        ...props,
        elementDescriptor: {
            OptionName: "texts",
        },
    });
};
const CardViewHeaderFilterTexts = Object.assign(_componentCardViewHeaderFilterTexts, {
    componentType: "option",
});
const _componentCardViewSelection = (props) => {
    return React.createElement((NestedOption), {
        ...props,
        elementDescriptor: {
            OptionName: "selection",
        },
    });
};
const CardViewSelection = Object.assign(_componentCardViewSelection, {
    componentType: "option",
});
const _componentChange = (props) => {
    return React.createElement((NestedOption), {
        ...props,
        elementDescriptor: {
            OptionName: "changes",
            IsCollectionItem: true,
        },
    });
};
const Change = Object.assign(_componentChange, {
    componentType: "option",
});
const _componentColCountByScreen = (props) => {
    return React.createElement((NestedOption), {
        ...props,
        elementDescriptor: {
            OptionName: "colCountByScreen",
        },
    });
};
const ColCountByScreen = Object.assign(_componentColCountByScreen, {
    componentType: "option",
});
const _componentCollision = (props) => {
    return React.createElement((NestedOption), {
        ...props,
        elementDescriptor: {
            OptionName: "collision",
        },
    });
};
const Collision = Object.assign(_componentCollision, {
    componentType: "option",
});
const _componentColumn = (props) => {
    return React.createElement((NestedOption), {
        ...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",
});
const _componentColumnChooser = (props) => {
    return React.createElement((NestedOption), {
        ...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",
});
const _componentColumnChooserSearch = (props) => {
    return React.createElement((NestedOption), {
        ...props,
        elementDescriptor: {
            OptionName: "search",
        },
    });
};
const ColumnChooserSearch = Object.assign(_componentColumnChooserSearch, {
    componentType: "option",
});
const _componentColumnChooserSelection = (props) => {
    return React.createElement((NestedOption), {
        ...props,
        elementDescriptor: {
            OptionName: "selection",
        },
    });
};
const ColumnChooserSelection = Object.assign(_componentColumnChooserSelection, {
    componentType: "option",
});
const _componentColumnHeaderFilter = (props) => {
    return React.createElement((NestedOption), {
        ...props,
        elementDescriptor: {
            OptionName: "headerFilter",
            ExpectedChildren: {
                columnHeaderFilterSearch: { optionName: "search", isCollectionItem: false },
                search: { optionName: "search", isCollectionItem: false }
            },
        },
    });
};
const ColumnHeaderFilter = Object.assign(_componentColumnHeaderFilter, {
    componentType: "option",
});
const _componentColumnHeaderFilterSearch = (props) => {
    return React.createElement((NestedOption), {
        ...props,
        elementDescriptor: {
            OptionName: "search",
        },
    });
};
const ColumnHeaderFilterSearch = Object.assign(_componentColumnHeaderFilterSearch, {
    componentType: "option",
});
const _componentCompareRule = (props) => {
    return React.createElement((NestedOption), {
        ...props,
        elementDescriptor: {
            OptionName: "validationRules",
            IsCollectionItem: true,
            PredefinedProps: {
                type: "compare"
            },
        },
    });
};
const CompareRule = Object.assign(_componentCompareRule, {
    componentType: "option",
});
const _componentCustomOperation = (props) => {
    return React.createElement((NestedOption), {
        ...props,
        elementDescriptor: {
            OptionName: "customOperations",
            IsCollectionItem: true,
            TemplateProps: [{
                    tmplOption: "editorTemplate",
                    render: "editorRender",
                    component: "editorComponent"
                }],
        },
    });
};
const CustomOperation = Object.assign(_componentCustomOperation, {
    componentType: "option",
});
const _componentCustomRule = (props) => {
    return React.createElement((NestedOption), {
        ...props,
        elementDescriptor: {
            OptionName: "validationRules",
            IsCollectionItem: true,
            PredefinedProps: {
                type: "custom"
            },
        },
    });
};
const CustomRule = Object.assign(_componentCustomRule, {
    componentType: "option",
});
const _componentDragging = (props) => {
    return React.createElement((NestedOption), {
        ...props,
        elementDescriptor: {
            OptionName: "dragging",
        },
    });
};
const Dragging = Object.assign(_componentDragging, {
    componentType: "option",
});
const _componentEditing = (props) => {
    return React.createElement((NestedOption), {
        ...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",
});
const _componentEditingTexts = (props) => {
    return React.createElement((NestedOption), {
        ...props,
        elementDescriptor: {
            OptionName: "texts",
        },
    });
};
const EditingTexts = Object.assign(_componentEditingTexts, {
    componentType: "option",
});
const _componentEmailRule = (props) => {
    return React.createElement((NestedOption), {
        ...props,
        elementDescriptor: {
            OptionName: "validationRules",
            IsCollectionItem: true,
            PredefinedProps: {
                type: "email"
            },
        },
    });
};
const EmailRule = Object.assign(_componentEmailRule, {
    componentType: "option",
});
const _componentEmptyItem = (props) => {
    return React.createElement((NestedOption), {
        ...props,
        elementDescriptor: {
            OptionName: "items",
            IsCollectionItem: true,
            PredefinedProps: {
                itemType: "empty"
            },
        },
    });
};
const EmptyItem = Object.assign(_componentEmptyItem, {
    componentType: "option",
});
const _componentField = (props) => {
    return React.createElement((NestedOption), {
        ...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",
});
const _componentFilterBuilder = (props) => {
    return React.createElement((NestedOption), {
        ...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",
});
const _componentFilterOperationDescriptions = (props) => {
    return React.createElement((NestedOption), {
        ...props,
        elementDescriptor: {
            OptionName: "filterOperationDescriptions",
        },
    });
};
const FilterOperationDescriptions = Object.assign(_componentFilterOperationDescriptions, {
    componentType: "option",
});
const _componentFilterPanel = (props) => {
    return React.createElement((NestedOption), {
        ...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",
});
const _componentFilterPanelTexts = (props) => {
    return React.createElement((NestedOption), {
        ...props,
        elementDescriptor: {
            OptionName: "texts",
        },
    });
};
const FilterPanelTexts = Object.assign(_componentFilterPanelTexts, {
    componentType: "option",
});
const _componentForm = (props) => {
    return React.createElement((NestedOption), {
        ...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",
});
const _componentFormat = (props) => {
    return React.createElement((NestedOption), {
        ...props,
        elementDescriptor: {
            OptionName: "format",
        },
    });
};
const Format = Object.assign(_componentFormat, {
    componentType: "option",
});
const _componentFormItem = (props) => {
    return React.createElement((NestedOption), {
        ...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",
});
const _componentFrom = (props) => {
    return React.createElement((NestedOption), {
        ...props,
        elementDescriptor: {
            OptionName: "from",
            ExpectedChildren: {
                position: { optionName: "position", isCollectionItem: false }
            },
        },
    });
};
const From = Object.assign(_componentFrom, {
    componentType: "option",
});
const _componentGroupItem = (props) => {
    return React.createElement((NestedOption), {
        ...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",
});
const _componentGroupOperationDescriptions = (props) => {
    return React.createElement((NestedOption), {
        ...props,
        elementDescriptor: {
            OptionName: "groupOperationDescriptions",
        },
    });
};
const GroupOperationDescriptions = Object.assign(_componentGroupOperationDescriptions, {
    componentType: "option",
});
const _componentHeaderFilter = (props) => {
    return React.createElement((NestedOption), {
        ...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",
});
const _componentHeaderPanel = (props) => {
    return React.createElement((NestedOption), {
        ...props,
        elementDescriptor: {
            OptionName: "headerPanel",
            ExpectedChildren: {
                dragging: { optionName: "dragging", isCollectionItem: false }
            },
            TemplateProps: [{
                    tmplOption: "itemTemplate",
                    render: "itemRender",
                    component: "itemComponent"
                }],
        },
    });
};
const HeaderPanel = Object.assign(_componentHeaderPanel, {
    componentType: "option",
});
const _componentHide = (props) => {
    return React.createElement((NestedOption), {
        ...props,
        elementDescriptor: {
            OptionName: "hide",
            ExpectedChildren: {
                from: { optionName: "from", isCollectionItem: false },
                to: { optionName: "to", isCollectionItem: false }
            },
        },
    });
};
const Hide = Object.assign(_componentHide, {
    componentType: "option",
});
const _componentItem = (props) => {
    return React.createElement((NestedOption), {
        ...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",
});
const _componentLabel = (props) => {
    return React.createElement((NestedOption), {
        ...props,
        elementDescriptor: {
            OptionName: "label",
            TemplateProps: [{
                    tmplOption: "template",
                    render: "render",
                    component: "component"
                }],
        },
    });
};
const Label = Object.assign(_componentLabel, {
    componentType: "option",
});
const _componentLoadPanel = (props) => {
    return React.createElement((NestedOption), {
        ...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",
});
const _componentLookup = (props) => {
    return React.createElement((NestedOption), {
        ...props,
        elementDescriptor: {
            OptionName: "lookup",
        },
    });
};
const Lookup = Object.assign(_componentLookup, {
    componentType: "option",
});
const _componentMy = (props) => {
    return React.createElement((NestedOption), {
        ...props,
        elementDescriptor: {
            OptionName: "my",
        },
    });
};
const My = Object.assign(_componentMy, {
    componentType: "option",
});
const _componentNumericRule = (props) => {
    return React.createElement((NestedOption), {
        ...props,
        elementDescriptor: {
            OptionName: "validationRules",
            IsCollectionItem: true,
            PredefinedProps: {
                type: "numeric"
            },
        },
    });
};
const NumericRule = Object.assign(_componentNumericRule, {
    componentType: "option",
});
const _componentOffset = (props) => {
    return React.createElement((NestedOption), {
        ...props,
        elementDescriptor: {
            OptionName: "offset",
        },
    });
};
const Offset = Object.assign(_componentOffset, {
    componentType: "option",
});
const _componentPager = (props) => {
    return React.createElement((NestedOption), {
        ...props,
        elementDescriptor: {
            OptionName: "pager",
        },
    });
};
const Pager = Object.assign(_componentPager, {
    componentType: "option",
});
const _componentPaging = (props) => {
    return React.createElement((NestedOption), {
        ...props,
        elementDescriptor: {
            OptionName: "paging",
            DefaultsProps: {
                defaultPageIndex: "pageIndex",
                defaultPageSize: "pageSize"
            },
        },
    });
};
const Paging = Object.assign(_componentPaging, {
    componentType: "option",
});
const _componentPatternRule = (props) => {
    return React.createElement((NestedOption), {
        ...props,
        elementDescriptor: {
            OptionName: "validationRules",
            IsCollectionItem: true,
            PredefinedProps: {
                type: "pattern"
            },
        },
    });
};
const PatternRule = Object.assign(_componentPatternRule, {
    componentType: "option",
});
const _componentPosition = (props) => {
    return React.createElement((NestedOption), {
        ...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",
});
const _componentRangeRule = (props) => {
    return React.createElement((NestedOption), {
        ...props,
        elementDescriptor: {
            OptionName: "validationRules",
            IsCollectionItem: true,
            PredefinedProps: {
                type: "range"
            },
        },
    });
};
const RangeRule = Object.assign(_componentRangeRule, {
    componentType: "option",
});
const _componentRemoteOperations = (props) => {
    return React.createElement((NestedOption), {
        ...props,
        elementDescriptor: {
            OptionName: "remoteOperations",
        },
    });
};
const RemoteOperations = Object.assign(_componentRemoteOperations, {
    componentType: "option",
});
const _componentRequiredRule = (props) => {
    return React.createElement((NestedOption), {
        ...props,
        elementDescriptor: {
            OptionName: "validationRules",
            IsCollectionItem: true,
            PredefinedProps: {
                type: "required"
            },
        },
    });
};
const RequiredRule = Object.assign(_componentRequiredRule, {
    componentType: "option",
});
const _componentScrolling = (props) => {
    return React.createElement((NestedOption), {
        ...props,
        elementDescriptor: {
            OptionName: "scrolling",
        },
    });
};
const Scrolling = Object.assign(_componentScrolling, {
    componentType: "option",
});
const _componentSearch = (props) => {
    return React.createElement((NestedOption), {
        ...props,
        elementDescriptor: {
            OptionName: "search",
        },
    });
};
const Search = Object.assign(_componentSearch, {
    componentType: "option",
});
const _componentSearchPanel = (props) => {
    return React.createElement((NestedOption), {
        ...props,
        elementDescriptor: {
            OptionName: "searchPanel",
            DefaultsProps: {
                defaultText: "text"
            },
        },
    });
};
const SearchPanel = Object.assign(_componentSearchPanel, {
    componentType: "option",
});
const _componentSelection = (props) => {
    return React.createElement((NestedOption), {
        ...props,
        elementDescriptor: {
            OptionName: "selection",
        },
    });
};
const Selection = Object.assign(_componentSelection, {
    componentType: "option",
});
const _componentShow = (props) => {
    return React.createElement((NestedOption), {
        ...props,
        elementDescriptor: {
            OptionName: "show",
            ExpectedChildren: {
                from: { optionName: "from", isCollectionItem: false },
                to: { optionName: "to", isCollectionItem: false }
            },
        },
    });
};
const Show = Object.assign(_componentShow, {
    componentType: "option",
});
const _componentSimpleItem = (props) => {
    return React.createElement((NestedOption), {
        ...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",
});
const _componentSorting = (props) => {
    return React.createElement((NestedOption), {
        ...props,
        elementDescriptor: {
            OptionName: "sorting",
        },
    });
};
const Sorting = Object.assign(_componentSorting, {
    componentType: "option",
});
const _componentStringLengthRule = (props) => {
    return React.createElement((NestedOption), {
        ...props,
        elementDescriptor: {
            OptionName: "validationRules",
            IsCollectionItem: true,
            PredefinedProps: {
                type: "stringLength"
            },
        },
    });
};
const StringLengthRule = Object.assign(_componentStringLengthRule, {
    componentType: "option",
});
const _componentTab = (props) => {
    return React.createElement((NestedOption), {
        ...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",
});
const _componentTabbedItem = (props) => {
    return React.createElement((NestedOption), {
        ...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",
});
const _componentTabPanelOptions = (props) => {
    return React.createElement((NestedOption), {
        ...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",
});
const _componentTabPanelOptionsItem = (props) => {
    return React.createElement((NestedOption), {
        ...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",
});
const _componentTexts = (props) => {
    return React.createElement((NestedOption), {
        ...props,
        elementDescriptor: {
            OptionName: "texts",
        },
    });
};
const Texts = Object.assign(_componentTexts, {
    componentType: "option",
});
const _componentTo = (props) => {
    return React.createElement((NestedOption), {
        ...props,
        elementDescriptor: {
            OptionName: "to",
            ExpectedChildren: {
                position: { optionName: "position", isCollectionItem: false }
            },
        },
    });
};
const To = Object.assign(_componentTo, {
    componentType: "option",
});
const _componentToolbar = (props) => {
    return React.createElement((NestedOption), {
        ...props,
        elementDescriptor: {
            OptionName: "toolbar",
            ExpectedChildren: {
                item: { optionName: "items", isCollectionItem: true },
                toolbarItem: { optionName: "items", isCollectionItem: true }
            },
        },
    });
};
const Toolbar = Object.assign(_componentToolbar, {
    componentType: "option",
});
const _componentToolbarItem = (props) => {
    return React.createElement((NestedOption), {
        ...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",
});
const _componentValidationRule = (props) => {
    return React.createElement((NestedOption), {
        ...props,
        elementDescriptor: {
            OptionName: "validationRules",
            IsCollectionItem: true,
            PredefinedProps: {
                type: "required"
            },
        },
    });
};
const ValidationRule = Object.assign(_componentValidationRule, {
    componentType: "option",
});
export default CardView;
export { CardView, Animation, AsyncRule, At, BoundaryOffset, ButtonItem, ButtonOptions, CardCover, CardHeader, CardHeaderItem, CardViewHeaderFilter, CardViewHeaderFilterSearch, CardViewHeaderFilterTexts, CardViewSelection, Change, ColCountByScreen, Collision, Column, ColumnChooser, ColumnChooserSearch, ColumnChooserSelection, ColumnHeaderFilter, ColumnHeaderFilterSearch, CompareRule, CustomOperation, CustomRule, Dragging, Editing, EditingTexts, EmailRule, EmptyItem, Field, FilterBuilder, FilterOperationDescriptions, FilterPanel, FilterPanelTexts, Form, Format, FormItem, From, GroupItem, GroupOperationDescriptions, HeaderFilter, HeaderPanel, Hide, Item, Label, LoadPanel, Lookup, My, NumericRule, Offset, Pager, Paging, PatternRule, Position, RangeRule, RemoteOperations, RequiredRule, Scrolling, Search, SearchPanel, Selection, Show, SimpleItem, Sorting, StringLengthRule, Tab, TabbedItem, TabPanelOptions, TabPanelOptionsItem, Texts, To, Toolbar, ToolbarItem, ValidationRule };