devexpress-reporting-react 24.1.2-beta

package/dx-report-viewer/components/reporting/Toolbar/Zoom/Zoom.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { ISelectBoxActionViewModel } from '@devexpress/analytics-core/widgets/utils';
+declare const ToolbarZoom: React.FC<{
+    data: ISelectBoxActionViewModel;
+}>;
+export default ToolbarZoom;

package/dx-report-viewer/components/reporting/Toolbar/Zoom/Zoom.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { SelectBox } from 'devextreme-react/select-box';
+const ToolbarZoom = ({ data }) => {
+    const [dropDownOptions, setDropDownOptions] = React.useState();
+    const selectboxRef = React.useRef();
+    React.useEffect(() => {
+        const selectBoxElement = selectboxRef.current.instance().element();
+        setDropDownOptions({
+            container: data.getPopupContainer(selectBoxElement),
+            position: { my: 'left top', at: 'left bottom', of: selectBoxElement },
+            wrapperAttr: { class: 'dx-zoom-selectbox-popup-wrapper' }
+        });
+    }, []);
+    return (React.createElement("div", { className: "dxrd-toolbar-item-zoom", hidden: !data.visible },
+        React.createElement("div", { className: "dx-accessibility-toolbar-item dx-accessibility-focus-border-accented" },
+            React.createElement(SelectBox, { ref: selectboxRef, className: "dxrd-toolbar-item-zoom-editor", dataSource: data.widget.dataSource, onValueChanged: data.widget.onValueChanged, value: data.widget.value, acceptCustomValue: true, displayExpr: data.widget.displayExpr, useItemTextAsTitle: true, disabled: data.disabled, onCustomItemCreating: data.widget.onCustomItemCreating, width: 140, dropDownOptions: dropDownOptions, tabIndex: -1, inputAttr: data.widget.inputAttr }))));
+};
+export default ToolbarZoom;

package/dx-report-viewer/components/reporting/Toolbar/Zoom/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Zoom';
+export { default } from './Zoom';

package/dx-report-viewer/components/reporting/Toolbar/Zoom/index.js

@@ -0,0 +1,2 @@
+export * from './Zoom';
+export { default } from './Zoom';

package/dx-report-viewer/components/reporting/Widgets/PictureEditor/BrushOptions/PictureEditingBrushOptions.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { IPainterBrushOptions } from 'devexpress-reporting/viewer/widgets/pictureEditor/_painter';
+declare const PictureEditingBrushOptions: React.FC<{
+    data: IPainterBrushOptions;
+}>;
+export default PictureEditingBrushOptions;

package/dx-report-viewer/components/reporting/Widgets/PictureEditor/BrushOptions/PictureEditingBrushOptions.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import Slider from 'devextreme-react/slider';
+const PictureEditingBrushOptions = ({ data }) => {
+    return (React.createElement("div", { className: "dx-picture-editing-brush-options" },
+        React.createElement("div", { className: "dx-picture-editing-line-width" },
+            React.createElement("div", { className: "dx-picture-editing-text" }, data.brushWidthText),
+            React.createElement(Slider, { className: "dx-picture-editing-line-width-slider", min: 1, max: 9, value: data.lineWidth, label: { visible: true }, tooltip: { enabled: true, showMode: 'always', position: 'bottom' }, onValueChanged: data.onLineWidthChanged })),
+        React.createElement("div", { className: "dx-picture-editing-line-color" },
+            React.createElement("div", { className: "dx-picture-editing-text" }, data.brushColorText),
+            React.createElement("div", { className: "dx-picture-editing-brush-options-colors" }, data.colors.map((color, index) => (React.createElement("div", { key: index, className: `dx-picture-editing-brush-options-color ${color.isSelected ? 'selected' : ''}` },
+                React.createElement("div", { className: "dx-picture-editing-brush-options-color-cell", style: { background: color.value }, onClick: color.action }))))))));
+};
+export default PictureEditingBrushOptions;

package/dx-report-viewer/components/reporting/Widgets/PictureEditor/BrushOptions/index.d.ts

@@ -0,0 +1,2 @@
+export * from './PictureEditingBrushOptions';
+export { default } from './PictureEditingBrushOptions';

package/dx-report-viewer/components/reporting/Widgets/PictureEditor/BrushOptions/index.js

@@ -0,0 +1,2 @@
+export * from './PictureEditingBrushOptions';
+export { default } from './PictureEditingBrushOptions';

package/dx-report-viewer/components/reporting/Widgets/PictureEditor/ImagesPicker/PictureEditingImagesPicker.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { IImagePickerActionViewModel } from 'devexpress-reporting/viewer/widgets/pictureEditor/_imagePicker';
+declare const PictureEditingImagePicker: React.FC<{
+    data: IImagePickerActionViewModel;
+}>;
+export default PictureEditingImagePicker;

package/dx-report-viewer/components/reporting/Widgets/PictureEditor/ImagesPicker/PictureEditingImagesPicker.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import ScrollView from 'devextreme-react/scroll-view';
+const PictureEditingImagePicker = ({ data }) => {
+    return (React.createElement(ScrollView, { className: "dx-picture-editing-imagescontainer dxd-text-primary", style: { width: data.contentWidth + 'px' }, showScrollbar: "onHover", useNative: false, scrollByThumb: true }, data.images.map((image, index) => (React.createElement("div", { key: index, className: "dx-picture-editing-block dxd-state-normal dxd-back-highlighted", style: { width: (image.width + 10) + 'px' }, hidden: !image.visible, onClick: image.action }, image.visible && (React.createElement("div", null,
+        React.createElement("div", { className: "dx-picture-editing-block-image", style: { width: image.width + 'px', height: image.height + 'px', backgroundImage: 'url(' + (image.url || image.data) + ')' } }),
+        !!image.text && React.createElement("div", null,
+            image.filterEnabled && React.createElement("div", { className: "dx-picture-editing-block-text", title: image.text }),
+            !image.filterEnabled && React.createElement("div", { className: "dx-picture-editing-block-text", title: image.text }, image.text)))))))));
+};
+export default PictureEditingImagePicker;

package/dx-report-viewer/components/reporting/Widgets/PictureEditor/ImagesPicker/index.d.ts

@@ -0,0 +1,2 @@
+export * from './PictureEditingImagesPicker';
+export { default } from './PictureEditingImagesPicker';

package/dx-report-viewer/components/reporting/Widgets/PictureEditor/ImagesPicker/index.js

@@ -0,0 +1,2 @@
+export * from './PictureEditingImagesPicker';
+export { default } from './PictureEditingImagesPicker';

package/dx-report-viewer/components/reporting/Widgets/PictureEditor/ImagesPickerWithFilter/PictureEditingImagesPickerWithFilter.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { IImagePickerActionViewModel } from 'devexpress-reporting/viewer/widgets/pictureEditor/_imagePicker';
+declare const PictureEditingImagePickerWithFilter: React.FC<{
+    data: IImagePickerActionViewModel;
+}>;
+export default PictureEditingImagePickerWithFilter;

package/dx-report-viewer/components/reporting/Widgets/PictureEditor/ImagesPickerWithFilter/PictureEditingImagesPickerWithFilter.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import TextBox from 'devextreme-react/text-box';
+import PictureEditingImagesPicker from '../ImagesPicker';
+const PictureEditingImagePickerWithFilter = ({ data }) => {
+    return (React.createElement("div", { className: "dx-picture-editing-filtercontent", style: { width: data.contentWidth + 'px' } },
+        React.createElement(TextBox, { className: "dx-picture-editing-filtercontent-editor", value: data.filter, valueChangeEvent: "keyup", onValueChanged: data.onFilterChanged, placeholder: data.searchPlaceholder, showClearButton: true }),
+        React.createElement("div", { className: "dx-picture-editing-filtercontent-images" },
+            React.createElement(PictureEditingImagesPicker, { data: data }))));
+};
+export default PictureEditingImagePickerWithFilter;

package/dx-report-viewer/components/reporting/Widgets/PictureEditor/ImagesPickerWithFilter/index.d.ts

@@ -0,0 +1,2 @@
+export * from './PictureEditingImagesPickerWithFilter';
+export { default } from './PictureEditingImagesPickerWithFilter';

package/dx-report-viewer/components/reporting/Widgets/PictureEditor/ImagesPickerWithFilter/index.js

@@ -0,0 +1,2 @@
+export * from './PictureEditingImagesPickerWithFilter';
+export { default } from './PictureEditingImagesPickerWithFilter';

package/dx-report-viewer/components/reporting/Widgets/PictureEditor/Painter/Painter.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { IPainterOptions } from 'devexpress-reporting/viewer/widgets/pictureEditor/_painter';
+declare const PainterComponent: React.FC<{
+    options: IPainterOptions;
+} & Partial<React.HTMLAttributes<HTMLDivElement>>>;
+export default PainterComponent;

package/dx-report-viewer/components/reporting/Widgets/PictureEditor/Painter/Painter.js

@@ -0,0 +1,22 @@
+import { __rest } from "tslib";
+import React from 'react';
+import dxZoom from '../../../../../hooks/dxZoom';
+import { Painter } from 'devexpress-reporting/viewer/widgets/pictureEditor/_painter';
+const PainterComponent = (_a) => {
+    var { options, className } = _a, delegatedProps = __rest(_a, ["options", "className"]);
+    const ref = React.useRef();
+    const [model, setModel] = React.useState();
+    const canvasRef = dxZoom(model === null || model === void 0 ? void 0 : model.scale);
+    React.useLayoutEffect(() => {
+        const painter = new Painter(ref.current, options);
+        options.setPainter(painter);
+        setModel(painter);
+        return () => {
+            painter === null || painter === void 0 ? void 0 : painter.dispose();
+            options === null || options === void 0 ? void 0 : options.setPainter(null);
+        };
+    }, []);
+    return (React.createElement("div", Object.assign({ ref: ref, className: `dx-painter ${className}` }, delegatedProps),
+        React.createElement("canvas", { ref: canvasRef })));
+};
+export default PainterComponent;

package/dx-report-viewer/components/reporting/Widgets/PictureEditor/Painter/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Painter';
+export { default } from './Painter';

package/dx-report-viewer/components/reporting/Widgets/PictureEditor/Painter/index.js

@@ -0,0 +1,2 @@
+export * from './Painter';
+export { default } from './Painter';

package/dx-report-viewer/components/reporting/Widgets/PictureEditor/PictureEditor.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { IEditingFieldViewModelBase } from 'devexpress-reporting/viewer/editing/models/editingFieldBase';
+declare const PictureEditor: React.FC<{
+    options: IEditingFieldViewModelBase;
+} & Partial<React.HTMLAttributes<HTMLDivElement>>>;
+export default PictureEditor;

package/dx-report-viewer/components/reporting/Widgets/PictureEditor/PictureEditor.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import Popup from 'devextreme-react/popup';
+import Template from '../../../core/Template';
+import dxZoom from '../../../../hooks/dxZoom';
+import useDxForceRerender from '../../../../hooks/dxForceRerender';
+import { PictureEditorModel } from 'devexpress-reporting/viewer/widgets/pictureEditor/_pictureEditorModel';
+import { ViewModelChangedEvent } from '@devexpress/analytics-core/serializer/native/viewModels/viewModelGenerator';
+const PictureEditor = ({ options, className }) => {
+    const pictureEditingRef = React.useRef();
+    const [zoomScale, setZoomScale] = React.useState();
+    const [popupOptions, setPopupOptions] = React.useState({});
+    const [pictureEditorViewModel, setPictureEditorViewModel] = React.useState();
+    const forceRerender = useDxForceRerender();
+    const canvasRef = dxZoom(zoomScale);
+    React.useEffect(() => {
+        var _a;
+        const pictureEditorFieldModel = options.getModel();
+        const pictureEditorModel = new PictureEditorModel(pictureEditorFieldModel, pictureEditingRef.current, forceRerender);
+        const data = pictureEditorModel.getViewModel();
+        (_a = data.painter._viewModelEvents) === null || _a === void 0 ? void 0 : _a.on(ViewModelChangedEvent, arg => {
+            if (arg.propertyName === 'scale')
+                setZoomScale(arg.newValue);
+        });
+        setPictureEditorViewModel(data);
+        pictureEditorFieldModel._setPictureEditor && pictureEditorFieldModel._setPictureEditor(pictureEditorModel);
+        const parent = data.getPopupContainer(pictureEditingRef.current);
+        setPopupOptions({
+            container: data.shadingEnabled ? '.dx-overlay-wrapper.dx-picture-edit-popup-content-fullscreen' : parent,
+            position: {
+                my: 'left top',
+                at: 'right top',
+                boundary: parent,
+                of: data.element,
+                collision: 'fit',
+                offset: '1 -1'
+            }
+        });
+        const timer = setTimeout(() => {
+            pictureEditorFieldModel._renderedHandler && pictureEditorFieldModel._renderedHandler();
+        });
+        return () => {
+            clearTimeout(timer);
+            pictureEditorModel.dispose();
+            pictureEditorFieldModel._setPictureEditor(null);
+            setPictureEditorViewModel(null);
+        };
+    }, []);
+    const renderContent = () => {
+        const popupContentRerender = useDxForceRerender();
+        return (React.createElement("div", { className: `dx-picture-editing-toolbar ${className}` }, pictureEditorViewModel === null || pictureEditorViewModel === void 0 ? void 0 : pictureEditorViewModel.actions.map(action => {
+            var _a, _b;
+            (_b = (_a = action.templateOptions) === null || _a === void 0 ? void 0 : _a._viewModelEvents) === null || _b === void 0 ? void 0 : _b.on(ViewModelChangedEvent, popupContentRerender);
+            return (React.createElement("div", { key: action.id },
+                React.createElement("div", { className: "dx-picture-editing-toolbar-item", onClick: event => action.action(action, event.nativeEvent), title: action.title },
+                    React.createElement(Template, { className: "dx-picture-editing-toolbar-item-icon", template: action.icon })),
+                !!action.template && React.createElement(Template, { template: action.template, data: action.templateOptions })));
+        })));
+    };
+    return (React.createElement("div", { ref: pictureEditingRef, className: "dx-picture-editing" },
+        React.createElement("canvas", { ref: canvasRef }),
+        React.createElement(Popup, { className: "dx-picture-editing-active", width: "48px", height: "auto", wrapperAttr: { class: 'dx-picture-editing-active' }, position: popupOptions.position, container: popupOptions.container, showTitle: false, animation: {}, shading: false, visible: true, contentRender: renderContent })));
+};
+export default PictureEditor;

package/dx-report-viewer/components/reporting/Widgets/PictureEditor/SizeOptions/PictureEditingSizeOptions.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { IPainterSizeOptions } from 'devexpress-reporting/viewer/widgets/pictureEditor/_painter';
+declare const PictureEditingSizeOptions: React.FC<{
+    data: IPainterSizeOptions;
+}>;
+export default PictureEditingSizeOptions;

package/dx-report-viewer/components/reporting/Widgets/PictureEditor/SizeOptions/PictureEditingSizeOptions.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import Template from '../../../../core/Template';
+const PictureEditingSizeOptions = ({ data }) => {
+    return (React.createElement("div", { className: "dx-picture-editing-sizemode-alignment" },
+        React.createElement("div", { className: "dx-picture-editing-sizemode" },
+            React.createElement("div", { className: "dx-picture-editing-text" }, data.sizeModeText),
+            React.createElement("div", { className: "dx-picture-editing-sizemode-values" }, data.sizeModeValues.map((sizeModeValue, index) => (React.createElement(Template, { key: index, className: `dx-picture-editing-sizemode-alignment-value ${sizeModeValue.isSelected ? 'selected' : ''}`, template: sizeModeValue.iconTemplate, title: sizeModeValue.attrTitle, onClick: sizeModeValue.action }))))),
+        React.createElement("div", { className: "dx-picture-editing-alignment" },
+            React.createElement("div", { className: "dx-picture-editing-text" }, data.alignmentText),
+            React.createElement("div", { className: "dx-picture-editing-alignment-values" }, data.alignmentValues.map((alignmentValue, index) => (React.createElement(Template, { key: index, className: `dx-picture-editing-sizemode-alignment-value ${alignmentValue.isSelected ? 'selected' : ''}`, template: alignmentValue.iconTemplate, title: alignmentValue.attrTitle, onClick: alignmentValue.action })))))));
+};
+export default PictureEditingSizeOptions;

package/dx-report-viewer/components/reporting/Widgets/PictureEditor/SizeOptions/index.d.ts

@@ -0,0 +1,2 @@
+export * from './PictureEditingSizeOptions';
+export { default } from './PictureEditingSizeOptions';

package/dx-report-viewer/components/reporting/Widgets/PictureEditor/SizeOptions/index.js

@@ -0,0 +1,2 @@
+export * from './PictureEditingSizeOptions';
+export { default } from './PictureEditingSizeOptions';

package/dx-report-viewer/components/reporting/Widgets/PictureEditor/ToolbarPopup/PictureEditorToolbarPopup.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { IPictureEditorActionPopup } from 'devexpress-reporting/viewer/widgets/pictureEditor/_pictureEditorToolbarItem';
+declare const PictureEditingToolbarOptions: React.FC<{
+    data: IPictureEditorActionPopup;
+}>;
+export default PictureEditingToolbarOptions;

package/dx-report-viewer/components/reporting/Widgets/PictureEditor/ToolbarPopup/PictureEditorToolbarPopup.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import Template from '../../../../core/Template';
+import { Popover } from 'devextreme-react/popover';
+import { getParentContainer } from '@devexpress/analytics-core/widgets/_utils';
+const PictureEditingToolbarOptions = ({ data }) => {
+    const ref = React.useRef();
+    const [popupOptions, setPopupOptions] = React.useState({});
+    React.useEffect(() => {
+        const target = data.getPositionTarget();
+        setPopupOptions({
+            container: target,
+            position: {
+                my: 'left top',
+                at: 'right top',
+                boundary: getParentContainer(ref.current),
+                of: target,
+                collision: 'flipfit fit',
+                offset: '-10 0'
+            },
+        });
+    }, []);
+    return (React.createElement("div", { ref: ref },
+        React.createElement(Popover, { className: "dx-picture-edit-popup-content", width: data.width, height: data.height, wrapperAttr: { class: 'dx-picture-edit-popup-content' }, hideOnOutsideClick: data.hideOnOutsideClick, onShown: data.onShown, onHidden: data.onHidden, onContentReady: data.onContentReady, position: popupOptions.position, container: popupOptions.container, showTitle: false, showCloseButton: false, shading: false, animation: {}, visible: data.visible },
+            React.createElement(Template, { template: data.contentTemplate, data: data.contentData }))));
+};
+export default PictureEditingToolbarOptions;

package/dx-report-viewer/components/reporting/Widgets/PictureEditor/ToolbarPopup/index.d.ts

@@ -0,0 +1,2 @@
+export * from './PictureEditorToolbarPopup';
+export { default } from './PictureEditorToolbarPopup';

package/dx-report-viewer/components/reporting/Widgets/PictureEditor/ToolbarPopup/index.js

@@ -0,0 +1,2 @@
+export * from './PictureEditorToolbarPopup';
+export { default } from './PictureEditorToolbarPopup';

package/dx-report-viewer/components/reporting/Widgets/PictureEditor/index.d.ts

@@ -0,0 +1,2 @@
+export * from './PictureEditor';
+export { default } from './PictureEditor';

package/dx-report-viewer/components/reporting/Widgets/PictureEditor/index.js

@@ -0,0 +1,2 @@
+export * from './PictureEditor';
+export { default } from './PictureEditor';

package/dx-report-viewer/components/reporting/Widgets/SignatureEditor/SignatureEditor.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { IEditorViewModel } from '@devexpress/analytics-core/property-grid/widgets/editor';
+declare const SignatureEditor: React.FC<{
+    data: IEditorViewModel;
+}>;
+export default SignatureEditor;

package/dx-report-viewer/components/reporting/Widgets/SignatureEditor/SignatureEditor.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import Template from '../../../core/Template';
+import Validator from 'devextreme-react/validator';
+import { SelectBox } from 'devextreme-react/select-box';
+import { noDataText } from '@devexpress/analytics-core/property-grid/localization/_localization';
+import { useDropDownOptions, useEditorOptions, useValidatorOptions } from '../../../analytics/Properties/Editors/editorHooks';
+const SignatureEditor = ({ data }) => {
+    const selectBoxRef = React.useRef();
+    const getEditorOptions = () => ({
+        dataSource: data.values,
+        onValueChanged: (event) => data.onValueChanged(event),
+        itemTemplate: 'item',
+        displayExpr: 'displayName',
+        valueExpr: 'key',
+        showClearButton: true,
+        noDataText: noDataText(),
+        inputAttr: { 'aria-label': data.displayName, id: data.editorInputId }
+    });
+    const args = {
+        getEditorOptions,
+        getPrivateWidgetOptions: () => ({
+            encodeNoDataText: true,
+        }),
+    };
+    const options = useEditorOptions(selectBoxRef, data, args);
+    const dropDownOptions = useDropDownOptions(selectBoxRef, ({ container }) => ({ minWidth: '300px', container }));
+    const validatorOptions = useValidatorOptions(data);
+    const renderItem = signature => (React.createElement("div", { className: "dxrdv-signature-editor-item" },
+        React.createElement("div", { className: "dxrdv-signature-editor-item-image" }, signature.image ? React.createElement("img", { src: signature.image }) : React.createElement(Template, { template: "dxrd-svg-preview-signature_img_placeholder" })),
+        React.createElement("div", { className: "dxrdv-signature-editor-item-info" }, signature.fields.map(({ label, value }) => (React.createElement("div", { key: `${label}-${value}`, className: "dxrdv-signature-editor-item-info-field", title: value },
+            React.createElement("span", { className: "dxrdv-signature-editor-item-info-field-label" }, label),
+            React.createElement("span", null, value)))))));
+    return (React.createElement(SelectBox, { ref: selectBoxRef, dataSource: options.dataSource, onValueChanged: options.onValueChanged, itemTemplate: options.itemTemplate, displayExpr: options.displayExpr, valueExpr: options.valueExpr, showClearButton: options.showClearButton, noDataText: options.noDataText, dropDownOptions: dropDownOptions, itemRender: renderItem }, !!data.validationRules && React.createElement(Validator, { validationRules: validatorOptions.validationRules })));
+};
+export default SignatureEditor;

package/dx-report-viewer/components/reporting/Widgets/SignatureEditor/index.d.ts

@@ -0,0 +1,2 @@
+export * from './SignatureEditor';
+export { default } from './SignatureEditor';

package/dx-report-viewer/components/reporting/Widgets/SignatureEditor/index.js

@@ -0,0 +1,2 @@
+export * from './SignatureEditor';
+export { default } from './SignatureEditor';

package/dx-report-viewer/components/reporting/_templates.d.ts

@@ -0,0 +1,2 @@
+import { Templates } from '../../core/templates';
+export declare const reportingTemplates: Templates;

package/dx-report-viewer/components/reporting/_templates.js

@@ -0,0 +1,106 @@
+import Breadcrumbs from './ReportPreview/Breadcrumbs';
+import Brick from './ReportPreview/Brick';
+import BrickClickable from './ReportPreview/BrickClickable';
+import ExportOptions from './ExportOptions';
+import ExportTo from './Toolbar/ExportTo';
+import Page from './ReportPreview/Page';
+import Pager from './Toolbar/Pager';
+import ProgressBar from './ReportPreview/ProgressBar';
+import Search from './Search';
+import Surface from './ReportPreview/Surface';
+import ToolbarContent from './Toolbar/ToolbarContent';
+import Zoom from './Toolbar/Zoom';
+import ParametersPanel from './ParametersPanel';
+import DocumentMap from './DocumentMap';
+import Editor from './ParametersPanel/Editor/Editor';
+import EditorContent from './ParametersPanel/Editor/EditorContent';
+import GroupEditor from './ParametersPanel/Editor/GroupEditor';
+import EditingFieldContainer from './Editing/TextField/Container';
+import EditingFieldText from './Editing/TextField/Text';
+import EditingFieldMask from './Editing/TextField/Mask';
+import EditingFieldDateTime from './Editing/TextField/DateTime';
+import EditingFieldNumber from './Editing/TextField/Number';
+import CharacterComb from './Editing/CharacterComb';
+import CheckBoxEditingField from './Editing/CheckField/CheckBox';
+import RadioEditingField from './Editing/CheckField/Radio';
+import ImageEditingFieldComponent from './Editing/ImageEditingField/ImageEditingFieldComponent';
+import ImageEditingFieldEditor from './Editing/ImageEditingField/ImageEditingFieldEditor';
+import PopupImageEditingField from './Editing/PopupImageEditingField';
+import CheckBoxGlyph from './Editing/CheckField/CheckBoxGlyph';
+import ExportTool from './Editing/ExportTool';
+import Calendar from './ParametersPanel/DateRange/Calendar';
+import ParametersSeparator from './ParametersPanel/ParametersSeparator';
+import DateRangePopupContainer from './ParametersPanel/DateRange/PopupContainer';
+import DateRange from './ParametersPanel/DateRange/DateRange';
+import DateRangeMobile from './ParametersPanel/DateRange/Mobile';
+import SignatureEditor from './Widgets/SignatureEditor';
+import MultiValue from './ParametersPanel/MultiValue/MultiValue';
+import MultiValueEditable from './ParametersPanel/MultiValue/MultiValueEditable';
+import PictureEditingToolbarOptions from './Widgets/PictureEditor/ToolbarPopup/PictureEditorToolbarPopup';
+import PictureEditingBrushOptions from './Widgets/PictureEditor/BrushOptions/PictureEditingBrushOptions';
+import PictureEditingImagePicker from './Widgets/PictureEditor/ImagesPicker/PictureEditingImagesPicker';
+import PictureEditingSizeOptions from './Widgets/PictureEditor/SizeOptions/PictureEditingSizeOptions';
+import PictureEditingImagePickerWithFilter from './Widgets/PictureEditor/ImagesPickerWithFilter/PictureEditingImagesPickerWithFilter';
+import MobileSearch from './Mobile/Search';
+import MobileSurface from './Mobile/Surface';
+import MobilePaginator from './Mobile/Pages';
+import MobilePage from './Mobile/Page';
+import MobileActions from './Mobile/Actions/MobileActions';
+import MobileActionsExport from './Mobile/Actions/MobileActionsExport';
+import MobileParametersPopup from './Mobile/Parameters/MobileParametersPopup';
+import MobileParameters from './Mobile/Parameters/MobileParameters';
+import MobileParametersDateRange from './Mobile/Parameters/MobileParametersDateRange';
+export const reportingTemplates = {
+    'dxrd-preview-pager': Pager,
+    'dxrd-zoom-autofit-select-template': Zoom,
+    'dxrd-preview-export-to': ExportTo,
+    'dxrd-preview-toolbar-scrollable': ToolbarContent,
+    'dxrd-preview-breadcrumb': Breadcrumbs,
+    'dxrd-preview-parameters': ParametersPanel,
+    'dxrd-parameters-property-editor': Editor,
+    'dxrdv-signature': SignatureEditor,
+    'dxrd-multivalue': MultiValue,
+    'dxrd-preview-export-options': ExportOptions,
+    'dxrd-preview-document-map': DocumentMap,
+    'dxrd-multivalue-editable': MultiValueEditable,
+    'dxrv-range-parameter': DateRange,
+    'dxrv-daterange-editor-popup': DateRangePopupContainer,
+    'dxrv-daterange-calendar': Calendar,
+    'dxrdp-surface': Surface,
+    'dxrd-preview-page': Page,
+    'dxrd-parameters-editor-content': EditorContent,
+    'dxrd-propertieseditor': GroupEditor,
+    'dxrd-preview-search': Search,
+    'dxrd-page-brick-mobile': Brick,
+    'dxrd-page-brick-clickable': BrickClickable,
+    'dxrd-parameters-separator': ParametersSeparator,
+    'dxrp-editing-field-container': EditingFieldContainer,
+    'dxrp-editing-field-text': EditingFieldText,
+    'dxrp-editing-field-mask': EditingFieldMask,
+    'dxrp-editing-field-datetime': EditingFieldDateTime,
+    'dxrp-editing-field-number': EditingFieldNumber,
+    'dxrp-character-comb-editing-field': CharacterComb,
+    'dxrp-editing-field-checkbox': CheckBoxEditingField,
+    'dxrp-editing-field-radio': RadioEditingField,
+    'dxrp-editing-field-image': ImageEditingFieldComponent,
+    'dxrp-editing-field-image-editor': ImageEditingFieldEditor,
+    'dxrp-popup-editing-field-image': PopupImageEditingField,
+    'dx-picture-editing-toolbar-popup': PictureEditingToolbarOptions,
+    'dx-picture-editing-brush-options': PictureEditingBrushOptions,
+    'dx-picture-editing-sizemode-alignment': PictureEditingSizeOptions,
+    'dx-picture-editing-imagespicker': PictureEditingImagePicker,
+    'dx-picture-editing-imagepickerwithfilter': PictureEditingImagePickerWithFilter,
+    'dxrd-preview-progress-bar': ProgressBar,
+    'dxrd-export-tool': ExportTool,
+    'dxrd-checkboxcustomglyph': CheckBoxGlyph,
+    'dxrdp-surface-mobile': MobileSurface,
+    'dxrd-preview-page-mobile': MobilePage,
+    'dxrdp-surface-mobile-bottom': MobileActions,
+    'dxrd-menu-parameters-content': MobileParametersPopup,
+    'dxrv-preview-parameters-mobile': MobileParameters,
+    'dxrv-range-parameter-mobile': MobileParametersDateRange,
+    'dxrv-preview-date-range-mobile': DateRangeMobile,
+    'dxrd-menu-export-content': MobileActionsExport,
+    'dxrdp-search-mobile': MobileSearch,
+    'dxrdp-pages-mobile': MobilePaginator,
+};

package/dx-report-viewer/core/template-engine.d.ts

@@ -0,0 +1,6 @@
+import { Templates } from './templates';
+export declare class TemplateEngine {
+    _templates: Templates;
+    getTemplate<K extends keyof Templates>(templateName: K | string): Templates[K];
+    setTemplate<K extends keyof Templates>(templateName: K, template: Templates[K]): void;
+}

package/dx-report-viewer/core/template-engine.js

@@ -0,0 +1,13 @@
+import { analyticsTemplates } from '../components/analytics/_templates';
+import { reportingTemplates } from '../components/reporting/_templates';
+export class TemplateEngine {
+    constructor() {
+        this._templates = Object.assign(Object.assign({}, analyticsTemplates), reportingTemplates);
+    }
+    getTemplate(templateName) {
+        return this._templates[templateName];
+    }
+    setTemplate(templateName, template) {
+        this._templates[templateName] = template;
+    }
+}

package/dx-report-viewer/core/templates.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { TemplateViewModels } from 'devexpress-reporting/viewer/templates';
+export type Templates = Partial<{
+    [K in keyof TemplateViewModels]: React.ComponentClass<{
+        data: TemplateViewModels[K];
+    }> | React.FunctionComponent<{
+        data: TemplateViewModels[K];
+    }>;
+}> & {
+    [key: string]: React.ComponentType<any>;
+};

package/dx-report-viewer/core/templates.js

@@ -0,0 +1 @@
+export {};

package/dx-report-viewer/hooks/dxAccordion.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ICollapsedViewModel } from '@devexpress/analytics-core/property-grid/widgets/editor';
+declare const useDxAccordion: (ref: React.MutableRefObject<HTMLElement>, options: ICollapsedViewModel) => void;
+export default useDxAccordion;

package/dx-report-viewer/hooks/dxAccordion.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import { InitAccordion } from '@devexpress/analytics-core/property-grid/bindings.accordion';
+const useDxAccordion = (ref, options) => {
+    React.useEffect(() => options && InitAccordion(ref.current, options), [options, ref.current]);
+};
+export default useDxAccordion;

package/dx-report-viewer/hooks/dxAction.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const useDxAction: (ref: React.MutableRefObject<HTMLElement>, action: (e: any, ...rest: any[]) => void, model: any) => void;
+export default useDxAction;

package/dx-report-viewer/hooks/dxAction.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { KeyboardEnum } from '@devexpress/analytics-core/property-grid/widgets/internal/_utils';
+const useDxAction = (ref, action, model) => {
+    React.useEffect(() => {
+        const element = ref.current;
+        if (!element)
+            return undefined;
+        const handleClick = (e) => action.call(model, model, e);
+        const handleKeyDown = (e) => {
+            if (e.key == KeyboardEnum.Enter || e.key == KeyboardEnum.Space) {
+                action.call(model, model, e);
+            }
+        };
+        element.addEventListener('click', handleClick);
+        element.addEventListener('keydown', handleKeyDown);
+        return () => {
+            element.removeEventListener('click', handleClick);
+            element.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [ref.current, action, model, ref.current]);
+};
+export default useDxAction;

package/dx-report-viewer/hooks/dxAutoFit.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { IAutoFitOptions } from 'devexpress-reporting/viewer/internal/_bindings';
+declare const useDxAutoFit: (ref: React.MutableRefObject<HTMLElement>, options: IAutoFitOptions) => void;
+export default useDxAutoFit;

package/dx-report-viewer/hooks/dxAutoFit.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import { initializeAutoFitBinding } from 'devexpress-reporting/viewer/internal/_bindings';
+const useDxAutoFit = (ref, options) => {
+    React.useEffect(() => options && initializeAutoFitBinding(ref.current, options), [options, ref.current]);
+};
+export default useDxAutoFit;

package/dx-report-viewer/hooks/dxBrickSelection.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { IBrickSelectionOptions } from 'devexpress-reporting/viewer/internal/_previewSelection';
+declare const useDxBrickSelection: (ref: React.MutableRefObject<HTMLElement>, options: IBrickSelectionOptions) => void;
+export default useDxBrickSelection;

package/dx-report-viewer/hooks/dxBrickSelection.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import { initializeBrickSelectionProg } from 'devexpress-reporting/viewer/internal/_previewSelection';
+const useDxBrickSelection = (ref, options) => {
+    React.useEffect(() => options && initializeBrickSelectionProg(ref.current, options), [options, ref.current]);
+};
+export default useDxBrickSelection;

package/dx-report-viewer/hooks/dxButtonWithTemplate.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ButtonOptions } from '@devexpress/analytics-core/core/widgets/_buttonInlineEditor';
+declare const useDxButtonWithTemplate: (ref: React.MutableRefObject<HTMLElement>, options: ButtonOptions) => void;
+export default useDxButtonWithTemplate;

package/dx-report-viewer/hooks/dxButtonWithTemplate.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import { InitButtonWithTemplate } from '@devexpress/analytics-core/core/widgets/_buttonInlineEditor';
+const useDxButtonWithTemplate = (ref, options) => {
+    React.useEffect(() => options && ref.current && InitButtonWithTemplate(ref.current, options), [options, ref.current]);
+};
+export default useDxButtonWithTemplate;