@evoke-platform/ui-components 1.0.0-dev.163 → 1.0.0-dev.164

package/dist/published/components/custom/FormField/AddressFieldComponent/addressFieldComponent.js

@@ -1,7 +1,7 @@
 import { Popover } from '@mui/material';
 import React, { useEffect, useState } from 'react';
 import InputMask from 'react-input-mask';
-import { CancelOutlined } from '../../../../icons';
+import { CancelOutlined } from '@mui/icons-material';
 import { Button, List, ListItem, TextField, Typography } from '../../../core';
 import { Box } from '../../../layout';
 const AddressFieldComponent = (props) => {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@evoke-platform/ui-components",
-    "version": "1.0.0-dev.163",
+    "version": "1.0.0-dev.164",
     "description": "",
     "main": "dist/published/index.js",
     "module": "dist/published/index.js",
@@ -10,13 +10,18 @@
         "colors.ts",
         "types.ts"
     ],
+    "exports": {
+        ".": "./dist/published/index.js",
+        "./colors": "./dist/published/colors/index.js",
+        "./icons": "./dist/published/icons/index.js",
+        "./types": "./dist/published/types/index.js"
+      },
     "scripts": {
         "test": "jest",
         "copy-files": "copyfiles -u 1 src/styles/*.css dist/published/",
-        "build": "rm -rf /dist && npm run build:esm && npm run build:cjs",
-        "build:esm": "tsc",
+        "build": "rm -rf ./dist && tsc",
         "build:cjs": "tsc --module CommonJS --outDir dist/cjs",
-        "prepublish": "rm -rf /dist && tsc && npm run copy-files",
+        "prepublish": "rm -rf ./dist && tsc && npm run copy-files",
         "storybook": "start-storybook -p 6006",
         "build-storybook": "build-storybook",
         "lint": "prettier --check src/**/*.*",

package/dist/published/shared/RichTextEditor/MergeFieldDialog.d.ts

@@ -1,11 +0,0 @@
-/// <reference types="react" />
-import { EvokeObject } from '../../components/custom/types';
-declare type MergeFieldDialogProps = {
-    objectId: string;
-    openMergeFieldDialog: boolean;
-    setOpenMergeFieldDialog: (open: boolean) => void;
-    insertMergeField: (mergeField: string, type?: string) => void;
-    fetchObject: (id: string) => Promise<EvokeObject | undefined>;
-};
-export default function MergeFieldDialog(props: MergeFieldDialogProps): JSX.Element;
-export {};

package/dist/published/shared/RichTextEditor/MergeFieldDialog.js

@@ -1,174 +0,0 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-import React, { useEffect, useState } from 'react';
-import { Box, Button, Dialog, DialogContent, DialogTitle, TreeView, TreeItem, Typography, Divider, styled, Tooltip, Skeleton, } from '../..';
-import { ChevronRight, ExpandMore } from '../../icons';
-import { getAddressProperties } from './utils';
-const StyledSpan = styled('span')({
-    marginLeft: '5px',
-});
-const PropertyTreeItem = (props) => {
-    var _a;
-    const { property, handleClick } = props;
-    return (React.createElement(TreeItem, Object.assign({ key: property.expandedId, nodeId: property.expandedId, label: property.name, onClick: () => handleClick(property), sx: { '& .MuiTreeItem-label': { whiteSpace: 'normal' }, width: '100%' } }, (property.type === 'object' || property.type === 'address' || property.type === 'collection'
-        ? {
-            endIcon: React.createElement(ChevronRight, null),
-        }
-        : {})), property.children && (React.createElement(React.Fragment, null, (_a = property.children) === null || _a === void 0 ? void 0 : _a.map((childProperty) => {
-        if (childProperty.name === 'Loading...') {
-            return (React.createElement(TreeItem, { key: childProperty.id, nodeId: childProperty.expandedId, label: React.createElement(React.Fragment, null,
-                    React.createElement(Skeleton, null),
-                    React.createElement(Skeleton, null),
-                    React.createElement(Skeleton, null)), sx: { '& .MuiTreeItem-label': { whiteSpace: 'normal' }, width: '100%' } }));
-        }
-        else if (childProperty.name === '<<foreach>> Wrapper') {
-            return (React.createElement(Tooltip, { placement: "top", title: React.createElement("div", null,
-                    "This wrapper is required to display each item within this collection. For example...",
-                    React.createElement("div", null, `
-                                        <<foreach [item in myCollection]>>
-                                        <<[item.firstName]>>, <<[item.lastName]>>
-                                        <</foreach>>`)), children: React.createElement(TreeItem, { key: childProperty.expandedId, nodeId: `${childProperty.expandedId}-collection`, label: childProperty.name, onClick: () => handleClick(childProperty), sx: {
-                        '& .MuiTreeItem-label': { whiteSpace: 'normal' },
-                        width: '100%',
-                        backgroundColor: '#f5f5f5',
-                    } }) }));
-        }
-        else {
-            return React.createElement(PropertyTreeItem, { property: childProperty, handleClick: handleClick });
-        }
-    })))));
-};
-export default function MergeFieldDialog(props) {
-    const { objectId, openMergeFieldDialog, setOpenMergeFieldDialog, insertMergeField, fetchObject } = props;
-    const [selectedProperty, setSelectedProperty] = useState();
-    const [propertyTree, setPropertyTree] = useState([]);
-    const getProperties = (objectId) => __awaiter(this, void 0, void 0, function* () {
-        try {
-            const data = yield fetchObject(objectId);
-            if (data === null || data === void 0 ? void 0 : data.properties) {
-                setPropertyTree(data.properties.map((property) => (Object.assign(Object.assign(Object.assign({}, property), { expandedId: property.id, mergeFieldId: `${property.id}` }), ((property.type === 'object' ||
-                    property.type === 'address' ||
-                    property.type === 'collection') && {
-                    children: [
-                        {
-                            id: `${property.id}-loading`,
-                            name: 'Loading...',
-                        },
-                    ],
-                })))));
-            }
-        }
-        catch (error) {
-            console.log('Error:', error);
-        }
-    });
-    useEffect(() => {
-        getProperties(objectId);
-    }, [objectId]);
-    const handleSubmit = () => {
-        if (!selectedProperty)
-            return;
-        insertMergeField(selectedProperty.mergeFieldId, selectedProperty.expandedId);
-        setOpenMergeFieldDialog(false);
-    };
-    const handleClick = (property) => __awaiter(this, void 0, void 0, function* () {
-        if (property.type !== 'object' && property.type !== 'address' && property.type !== 'collection') {
-            setSelectedProperty(property);
-        }
-        else if (property.type === 'collection' && property.mergeFieldId.includes('foreach')) {
-            setSelectedProperty(property);
-        }
-        else {
-            const getChildren = (objectId, collectionNumber) => __awaiter(this, void 0, void 0, function* () {
-                try {
-                    const object = yield fetchObject(objectId);
-                    if (object === null || object === void 0 ? void 0 : object.properties) {
-                        const children = object.properties.map((prop) => {
-                            const mergeFieldPrefix = property.type === 'collection' ? `item${collectionNumber}` : `${property.mergeFieldId}`;
-                            // conso;
-                            return Object.assign(Object.assign(Object.assign({}, prop), { expandedId: `${property.expandedId}.${prop.id}`, mergeFieldId: `${mergeFieldPrefix}?.${prop.id}` }), (prop.type === 'object' || prop.type === 'address' || prop.type === 'collection'
-                                ? {
-                                    children: [
-                                        {
-                                            id: `${property.expandedId}.${prop.id}-loading`,
-                                            name: 'Loading...',
-                                        },
-                                    ],
-                                }
-                                : {}));
-                        });
-                        return children;
-                    }
-                }
-                catch (error) {
-                    console.log('Error:', error);
-                }
-            });
-            const updatePropertyTree = (tree, level) => __awaiter(this, void 0, void 0, function* () {
-                const updatedTree = yield Promise.all(tree.map((node) => __awaiter(this, void 0, void 0, function* () {
-                    if (node.expandedId === property.expandedId) {
-                        if (property.type === 'address') {
-                            return Object.assign(Object.assign({}, node), { children: getAddressProperties(node) });
-                        }
-                        if (node.children && property.objectId) {
-                            const collectionNumber = property.type === 'collection' ? level + 1 : level;
-                            const children = yield getChildren(property.objectId, collectionNumber);
-                            if (children) {
-                                return Object.assign(Object.assign({}, node), { children: [
-                                        property.type === 'collection' && {
-                                            id: `${node.expandedId}-collection`,
-                                            expandedId: `${node.expandedId}`,
-                                            name: '<<foreach>> Wrapper',
-                                            mergeFieldId: `foreach [item${collectionNumber} in ${node.mergeFieldId}]`,
-                                        },
-                                        ...children,
-                                    ] });
-                            }
-                        }
-                    }
-                    if (node.children) {
-                        node.children = yield updatePropertyTree(node.children, level + 1);
-                    }
-                    return node;
-                })));
-                return updatedTree;
-            });
-            const updatedPropertyTree = yield updatePropertyTree(propertyTree, 0);
-            setPropertyTree(updatedPropertyTree);
-        }
-    });
-    return (React.createElement(Dialog, { open: openMergeFieldDialog, onClose: () => setOpenMergeFieldDialog(false), hideBackdrop: true, sx: {
-            '& .MuiDialog-paper': {
-                width: '90%',
-                maxWidth: '600px',
-            },
-            borderRadius: '8px',
-        } },
-        React.createElement(DialogTitle, null, "Insert Merge Field"),
-        React.createElement(DialogContent, { sx: { marginTop: '5px' } },
-            selectedProperty ? (React.createElement(Typography, null,
-                React.createElement("strong", null, "Selected Field:"),
-                React.createElement(StyledSpan, null, selectedProperty.expandedId.replace(/\?/g, '')))) : (React.createElement(Typography, null, "Select a field to merge")),
-            React.createElement(Divider, { sx: { marginTop: '10px', marginBottom: '10px' } }),
-            React.createElement(TreeView, { "aria-label": "merge field navigator", defaultCollapseIcon: React.createElement(ExpandMore, null), defaultExpandIcon: React.createElement(ChevronRight, null), sx: {
-                    height: 300,
-                    width: '100%',
-                    flexGrow: 1,
-                    overflowY: 'auto',
-                    border: '1px solid #999',
-                    borderRadius: '4px',
-                } }, propertyTree.map((property) => (React.createElement(PropertyTreeItem, { property: property, handleClick: handleClick })))),
-            React.createElement(Box, { sx: { display: 'flex', justifyContent: 'flex-end', marginTop: '20px' } },
-                React.createElement(Button, { onClick: () => {
-                        setSelectedProperty(null);
-                        setOpenMergeFieldDialog(false);
-                    }, variant: "outlined" }, "Cancel"),
-                React.createElement(Button, { sx: { marginLeft: '10px' }, onClick: () => handleSubmit(), variant: "contained", disabled: !selectedProperty }, "Ok")))));
-}

package/dist/published/shared/RichTextEditor/QRDialog.d.ts

@@ -1,13 +0,0 @@
-/// <reference types="react" />
-import { Page } from '../../components/custom/types';
-declare type QRDialogProps = {
-    openQRdialog: boolean;
-    setOpenQRdialog: (openQRdialog: boolean) => void;
-    insertImage: (qr: string) => void;
-    pages: PageWithAppName[];
-};
-declare type PageWithAppName = Page & {
-    appName: string;
-};
-export default function QRDialog(props: QRDialogProps): JSX.Element;
-export {};

package/dist/published/shared/RichTextEditor/QRDialog.js

@@ -1,90 +0,0 @@
-import React, { useState } from 'react';
-import { Autocomplete, Box, Button, Dialog, DialogContent, DialogTitle, TextField, Typography, } from '../..';
-import { styled, lighten, darken } from '@mui/system';
-const GroupItems = styled('ul')({ padding: 0, fontSize: '12px' });
-const GroupHeader = styled('div')(({ theme }) => ({
-    position: 'sticky',
-    top: '-8px',
-    padding: '4px 10px',
-    fontSize: '12px',
-    color: theme.palette.primary.main,
-    backgroundColor: theme.palette.mode === 'light'
-        ? lighten(theme.palette.primary.light, 0.85)
-        : darken(theme.palette.primary.main, 0.8),
-}));
-export default function QRDialog(props) {
-    const { openQRdialog, setOpenQRdialog, insertImage, pages } = props;
-    const [QRCode, setQRCode] = useState({ encodedData: '', isPage: false, appId: '' });
-    const handleSubmit = () => {
-        let { encodedData } = QRCode;
-        let qrUrl = `"https://api.qrserver.com/v1/create-qr-code/?data=`;
-        if (!encodedData)
-            return;
-        if (QRCode.isPage) {
-            const baseUrl = process.env.REACT_APP_API_ROOT
-                ? process.env.REACT_APP_API_ROOT.replace('/api', '')
-                : window.location.origin;
-            if (encodedData.includes(':instanceId')) {
-                const pathParts = encodedData.split(':instanceId');
-                encodedData = `${pathParts[0]}" + id ${pathParts[1] && `+ "${pathParts[1]}"`}`;
-            }
-            else {
-                encodedData = `${encodedData}"`;
-            }
-            qrUrl += `${baseUrl}/app/${encodedData}`;
-        }
-        else {
-            qrUrl += `" + ${encodedData}`;
-        }
-        const qrTemplateExpressions = `
-    <<var [qrURL = ${qrUrl}]>>
-    <<image [qrURL]>>
-    `;
-        insertImage(qrTemplateExpressions);
-        setQRCode({ encodedData: '', isPage: false, appId: '' });
-    };
-    return (React.createElement(Dialog, { open: openQRdialog, onClose: () => setOpenQRdialog(false), hideBackdrop: true, keepMounted: false },
-        React.createElement(DialogTitle, null, "Insert QR Code"),
-        React.createElement(DialogContent, { sx: { width: '300px' } },
-            React.createElement(Typography, null, "Data To Encode"),
-            React.createElement(Autocomplete, { freeSolo: true, options: pages.map((page) => ({
-                    label: page.name,
-                    value: `${page.appId}/${page.id}`,
-                    sublabel: `/${page.id}`,
-                    appId: page.appId,
-                    appName: page.appName,
-                })), isOptionEqualToValue: (option, value) => {
-                    return option.value === value;
-                }, filterOptions: (options, state) => {
-                    const inputValue = state.inputValue.toLowerCase();
-                    return options.filter((option) => option.value.toLowerCase().includes(inputValue) ||
-                        option.sublabel.toLowerCase().includes(inputValue) ||
-                        option.appName.toLowerCase().includes(inputValue));
-                }, getOptionLabel: (selectedValue) => {
-                    if (typeof selectedValue === 'string') {
-                        const [appId, ...pageId] = selectedValue.split('/');
-                        const foundPage = pages.find((page) => page.id === pageId.join('/') && page.appId === appId);
-                        return foundPage ? foundPage === null || foundPage === void 0 ? void 0 : foundPage.name : '';
-                    }
-                    return selectedValue.label;
-                }, groupBy: (option) => option['appName'], renderGroup: (params) => {
-                    return (React.createElement("li", { key: params.key },
-                        React.createElement(GroupHeader, null, params.group),
-                        React.createElement(GroupItems, null, params.children)));
-                }, renderOption: (props, option) => (React.createElement("li", Object.assign({}, props),
-                    React.createElement(Box, { sx: { padding: '0px' } },
-                        React.createElement(Typography, { sx: { fontSize: '12px', height: '17px' } }, option.label),
-                        React.createElement(Typography, { sx: { color: '#586069', fontSize: '12px' } }, option.sublabel)))), onChange: (event, option) => {
-                    setQRCode(Object.assign(Object.assign({}, QRCode), { encodedData: (option === null || option === void 0 ? void 0 : option.value) || '', appId: option.appId || '', isPage: true }));
-                }, sortBy: 'NONE', 
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                renderInput: (params) => {
-                    var _a;
-                    return (React.createElement(TextField, Object.assign({}, params, { size: "small", sx: Object.assign(Object.assign({}, ((_a = params.sx) !== null && _a !== void 0 ? _a : {})), { color: 'blue', fontSize: '14px' }), value: QRCode.encodedData, onChange: (e) => {
-                            setQRCode(Object.assign(Object.assign({}, QRCode), { encodedData: e.target.value }));
-                        } })));
-                } }),
-            React.createElement(Box, { sx: { display: 'flex', justifyContent: 'flex-end', marginTop: '20px' } },
-                React.createElement(Button, { onClick: () => setOpenQRdialog(false), variant: "outlined" }, "Cancel"),
-                React.createElement(Button, { sx: { marginLeft: '10px' }, onClick: () => handleSubmit(), variant: "contained", disabled: !QRCode.encodedData }, "Ok")))));
-}

package/dist/published/shared/RichTextEditor/RichTextEditor.d.ts

@@ -1,20 +0,0 @@
-import 'devexpress-richedit/dist/dx.richedit.css';
-import 'devextreme-dist/css/dx.light.css';
-import { Dispatch, SetStateAction } from 'react';
-import { RichTextTemplate, EvokeObject, Page } from '../../components/custom/types';
-import '../../styles/custom.css';
-export declare type RichTextEditorProps = {
-    id: string;
-    richTextTemplate: RichTextTemplate;
-    setRichTextTemplate: Dispatch<SetStateAction<RichTextTemplate>>;
-    height: number | string;
-    object: EvokeObject;
-    timeZone: string;
-    fetchObject: (id: string) => Promise<EvokeObject | undefined>;
-    pages: PageWithAppName[];
-};
-declare type PageWithAppName = Page & {
-    appName: string;
-};
-declare const RichTextEditor: (props: RichTextEditorProps) => JSX.Element;
-export default RichTextEditor;

package/dist/published/shared/RichTextEditor/RichTextEditor.js

@@ -1,223 +0,0 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-import { Box } from '../../components/layout';
-import { DocumentFormat, InsertTabCommandId, ViewType, create, createOptions, MailMergeTabItemId, ViewTabItemId, FileTabItemId, RibbonItemType, RibbonMenuItem, RibbonButtonItem, InsertTabItemId, } from 'devexpress-richedit';
-import 'devexpress-richedit/dist/dx.richedit.css';
-import 'devextreme-dist/css/dx.light.css';
-import { debounce } from 'lodash';
-import React, { useEffect, useRef, useState } from 'react';
-import '../../styles/custom.css';
-import QRDialog from './QRDialog';
-import { convertIconToSvgString, getTemplateFields } from './utils';
-import { QrCode2Rounded } from '../../icons';
-import MergeFieldDialog from './MergeFieldDialog';
-const qrIcon = convertIconToSvgString(React.createElement(QrCode2Rounded, null));
-const RichTextEditor = (props) => {
-    const { id, richTextTemplate, setRichTextTemplate, timeZone, fetchObject, pages } = props;
-    const editorInstanceRef = useRef(null);
-    const [openQRdialog, setOpenQRdialog] = useState(false);
-    const [openMergeFieldDialog, setOpenMergeFieldDialog] = useState(false);
-    const options = createOptions();
-    useEffect(() => {
-        var _a;
-        if (options) {
-            //ribbon customizations
-            const fileTab = options.ribbon.getTab(0);
-            fileTab === null || fileTab === void 0 ? void 0 : fileTab.removeItem(FileTabItemId.CreateNewDocument); // Remove New
-            fileTab === null || fileTab === void 0 ? void 0 : fileTab.removeItem(FileTabItemId.ExportDocument); // Remove Save
-            fileTab === null || fileTab === void 0 ? void 0 : fileTab.removeItem(FileTabItemId.PrintDocument); // Remove Print
-            const viewTab = options.ribbon.getTab(6);
-            viewTab === null || viewTab === void 0 ? void 0 : viewTab.removeItem(ViewTabItemId.ToggleFullScreen); // Remove Fullscreen
-            //remove and rewrite/rename Simple View to Email Layout
-            viewTab === null || viewTab === void 0 ? void 0 : viewTab.removeItem(ViewTabItemId.SwitchToSimpleView);
-            viewTab === null || viewTab === void 0 ? void 0 : viewTab.insertItem({
-                beginGroup: false,
-                id: ViewTabItemId.SwitchToSimpleView,
-                type: RibbonItemType.Button,
-                text: 'Email Layout',
-                icon: 'dxre-icon-SimpleView',
-                showText: true,
-                toggleMode: true,
-                selected: false,
-            }, 0);
-            const mailMergeTab = options.ribbon.getTab(5);
-            mailMergeTab === null || mailMergeTab === void 0 ? void 0 : mailMergeTab.removeItem(MailMergeTabItemId.CreateFieldMenu); // Remove Create Field (i.e. Date, Page, etc.)
-            mailMergeTab === null || mailMergeTab === void 0 ? void 0 : mailMergeTab.removeItem(MailMergeTabItemId.ToggleViewMergedData); // Remove Merge Preview
-            mailMergeTab === null || mailMergeTab === void 0 ? void 0 : mailMergeTab.removeItem(MailMergeTabItemId.UpdateAllFields); // Remove Update All Fields
-            mailMergeTab === null || mailMergeTab === void 0 ? void 0 : mailMergeTab.removeItem(MailMergeTabItemId.ShowAllFieldResults); // Remove Field Results
-            mailMergeTab === null || mailMergeTab === void 0 ? void 0 : mailMergeTab.removeItem(MailMergeTabItemId.GoToFirstDataRecord); // Remove Go To First Record
-            mailMergeTab === null || mailMergeTab === void 0 ? void 0 : mailMergeTab.removeItem(MailMergeTabItemId.GoToPreviousDataRecord); // Remove Go To Previous Record
-            mailMergeTab === null || mailMergeTab === void 0 ? void 0 : mailMergeTab.removeItem(MailMergeTabItemId.GoToNextDataRecord); // Remove Go To Next Record
-            mailMergeTab === null || mailMergeTab === void 0 ? void 0 : mailMergeTab.removeItem(MailMergeTabItemId.GoToLastDataRecord); // Remove Go To Last Record
-            mailMergeTab === null || mailMergeTab === void 0 ? void 0 : mailMergeTab.removeItem(MailMergeTabItemId.ShowMailMergeDialog); // Remove Mail Merge Dialog
-            mailMergeTab === null || mailMergeTab === void 0 ? void 0 : mailMergeTab.removeItem(MailMergeTabItemId.ShowAllFieldCodes); // Remove Field Codes
-            mailMergeTab === null || mailMergeTab === void 0 ? void 0 : mailMergeTab.removeItem(MailMergeTabItemId.ShowInsertMergeFieldDialog); // Remove Out-Of-Box Merge Field Dialog
-            const objectPropertiesButton = new RibbonButtonItem('insertMergeField', 'Object Properties', {
-                showText: true,
-                toggleMode: false,
-                selected: false,
-                icon: 'dxre-icon-InsertDataField',
-                beginGroup: false,
-            });
-            const templateFieldMenu = new RibbonMenuItem('10001', 'Template Fields', [
-                ...(getTemplateFields(timeZone) || []),
-            ]);
-            mailMergeTab === null || mailMergeTab === void 0 ? void 0 : mailMergeTab.insertItem(objectPropertiesButton, 0);
-            mailMergeTab === null || mailMergeTab === void 0 ? void 0 : mailMergeTab.insertItem(templateFieldMenu, 1);
-            const insertTab = options.ribbon.getTab(2);
-            //Create QR Code Button
-            const QRButton = new RibbonButtonItem('qr', 'QR Code', {
-                showText: true,
-                toggleMode: false,
-                selected: false,
-                icon: qrIcon,
-                beginGroup: false,
-            });
-            const InsertPageCountField = new RibbonButtonItem('NUMPAGES', 'Page Count', {
-                showText: true,
-                toggleMode: false,
-                selected: false,
-                icon: 'dxre-icon-InsertPageCount',
-                beginGroup: false,
-            });
-            const InsertPageNumberField = new RibbonButtonItem('PAGE', 'Page Number', {
-                showText: true,
-                toggleMode: false,
-                selected: false,
-                icon: 'dxre-icon-InsertPageNumber',
-                beginGroup: false,
-            });
-            insertTab === null || insertTab === void 0 ? void 0 : insertTab.insertItem(QRButton, 2);
-            insertTab === null || insertTab === void 0 ? void 0 : insertTab.removeItem(InsertTabItemId.InsertPageCountField);
-            insertTab === null || insertTab === void 0 ? void 0 : insertTab.insertItem(InsertPageCountField, InsertTabItemId.InsertPageCountField);
-            insertTab === null || insertTab === void 0 ? void 0 : insertTab.removeItem(InsertTabItemId.InsertPageNumberField);
-            insertTab === null || insertTab === void 0 ? void 0 : insertTab.insertItem(InsertPageNumberField, InsertTabItemId.InsertPageNumberField);
-            //Event handlers
-            options.events.customCommandExecuted = (s, e) => {
-                if (e.commandName === 'qr') {
-                    setOpenQRdialog(true);
-                }
-                if (e.commandName === 'insertMergeField') {
-                    setOpenMergeFieldDialog(true);
-                }
-                if (e.commandName === 'NUMPAGES' || e.commandName === 'PAGE') {
-                    // insert NUMPAGES or PAGE fields from the Insert Tab
-                    insertMergeField(e.commandName, undefined, 'templateField-pages');
-                }
-                const setMergeCommandListeners = (items, commandName) => {
-                    items === null || items === void 0 ? void 0 : items.forEach((item) => {
-                        if (item.id === commandName) {
-                            insertMergeField(item.mergeField, undefined, item.fieldType);
-                        }
-                    });
-                };
-                setMergeCommandListeners(getTemplateFields(timeZone), e.commandName);
-            };
-            if (options.confirmOnLosingChanges) {
-                options.confirmOnLosingChanges.enabled = false;
-            }
-            options.height = ((_a = props.height) === null || _a === void 0 ? void 0 : _a.toString()) + 'px';
-            if (options.view && richTextTemplate.viewType) {
-                options.view.viewType = richTextTemplate.viewType || 1;
-            }
-            options.events.documentChanged = (doc) => {
-                debouncedChangeHandler(doc);
-            };
-            options.events.documentLoaded = (doc) => {
-                // without the following, the document fields (i.e. page, date, etc.) are not shown
-                doc.document.fields.showAllFieldCodes();
-            };
-        }
-        const element = document.getElementById(id);
-        if (element && !editorInstanceRef.current) {
-            editorInstanceRef.current = create(element, options);
-            if (richTextTemplate.content) {
-                try {
-                    editorInstanceRef.current.openDocument(richTextTemplate.content, richTextTemplate.name, DocumentFormat.OpenXml);
-                }
-                catch (e) {
-                    console.error('content is not base64 encoded', e);
-                }
-            }
-            //editor customizations
-            editorInstanceRef.current.viewType = ViewType.PrintLayout;
-            editorInstanceRef.current.selection.showCursorAtEndOfLine = true;
-        }
-    }, []);
-    const debouncedChangeHandler = debounce((doc) => __awaiter(void 0, void 0, void 0, function* () {
-        doc.exportToBase64((docAsBase64) => setRichTextTemplate((prevTemplate) => (Object.assign(Object.assign({}, prevTemplate), { isDocx: true, content: docAsBase64 }))), DocumentFormat.OpenXml);
-    }), 500);
-    const insertImage = (imageTag) => {
-        const editorInstance = editorInstanceRef.current;
-        if (editorInstance !== undefined && editorInstance !== null) {
-            //insert new text box
-            editorInstance === null || editorInstance === void 0 ? void 0 : editorInstance.executeCommand(InsertTabCommandId.InsertFloatingTextBox);
-            const textBox = editorInstance === null || editorInstance === void 0 ? void 0 : editorInstance.selection.activeSubDocument;
-            textBox.insertText(editorInstance.selection.active, imageTag);
-        }
-        setOpenQRdialog(false);
-    };
-    const insertMergeField = (mergeFieldId, expandedFieldId, type) => {
-        // only add to additionalDatasources if it is a nested property
-        if (expandedFieldId && expandedFieldId.includes('.')) {
-            setRichTextTemplate((prevTemplate) => {
-                return Object.assign(Object.assign({}, prevTemplate), { additionalDatasources: [
-                        ...new Set([...(prevTemplate.additionalDatasources || []), expandedFieldId]),
-                    ] });
-            });
-        }
-        let mergeField;
-        if (type === 'templateField-pages') {
-            mergeField = mergeFieldId;
-        }
-        else if (mergeFieldId.includes('foreach')) {
-            mergeField = `<<${mergeFieldId}>>   <</foreach>>`;
-        }
-        else {
-            mergeField = `<<[${mergeFieldId}]>>`;
-        }
-        if (editorInstanceRef.current) {
-            if (type === 'image') {
-                insertImage(mergeField);
-            }
-            else if (type === 'templateField-pages') {
-                if (editorInstanceRef.current.selection.activeSubDocument) {
-                    editorInstanceRef.current.selection.activeSubDocument.fields.create(editorInstanceRef.current.selection.active, mergeField);
-                }
-                else {
-                    editorInstanceRef.current.document.fields.create(editorInstanceRef.current.selection.active, mergeField);
-                }
-                editorInstanceRef.current.selection.setSelection(editorInstanceRef.current.selection.active + 2);
-            }
-            else {
-                if (editorInstanceRef.current.selection.activeSubDocument) {
-                    editorInstanceRef.current.selection.activeSubDocument.insertText(editorInstanceRef.current.selection.active, mergeField);
-                }
-                else {
-                    editorInstanceRef.current.document.insertText(editorInstanceRef.current.selection.active, mergeField);
-                }
-            }
-            if (mergeField.includes('<<foreach')) {
-                //put cursor between forEach Tags
-                const position = editorInstanceRef.current.selection.active + mergeField.length - 12;
-                editorInstanceRef.current.selection.setSelection(position);
-            }
-            else {
-                //put cursor after inserted merge field
-                editorInstanceRef.current.selection.setSelection(editorInstanceRef.current.selection.active + mergeField.length);
-            }
-        }
-    };
-    return (React.createElement(Box, { sx: { width: '100%' } },
-        React.createElement("div", { id: id }),
-        React.createElement(QRDialog, { openQRdialog: openQRdialog, setOpenQRdialog: setOpenQRdialog, insertImage: insertImage, pages: pages }),
-        React.createElement(MergeFieldDialog, { objectId: props.object.id, openMergeFieldDialog: openMergeFieldDialog, setOpenMergeFieldDialog: setOpenMergeFieldDialog, insertMergeField: insertMergeField, fetchObject: fetchObject })));
-};
-export default RichTextEditor;

package/dist/published/shared/RichTextEditor/index.d.ts

@@ -1,3 +0,0 @@
-import RichTextEditor from './RichTextEditor';
-export { RichTextEditor };
-export default RichTextEditor;

package/dist/published/shared/RichTextEditor/index.js

@@ -1,3 +0,0 @@
-import RichTextEditor from './RichTextEditor';
-export { RichTextEditor };
-export default RichTextEditor;

package/dist/published/shared/RichTextEditor/utils.d.ts

@@ -1,31 +0,0 @@
-import { ObjectProperty } from '../../components/custom/types';
-import { RibbonSubMenuItem } from 'devexpress-richedit';
-import React from 'react';
-export declare function convertIconToSvgString(reactComponent: React.ReactElement): string;
-export declare type CustomRibbonSubMenuItem = RibbonSubMenuItem & {
-    mergeField: string;
-    fieldType?: string;
-    items?: CustomRibbonSubMenuItem[];
-    convertToButton?: () => void;
-};
-export declare type MergeProperty = ObjectProperty & {
-    expandedId: string;
-    mergeFieldId: string;
-    children?: MergeProperty[];
-};
-export declare const getAddressProperties: (address: MergeProperty) => ({
-    id: string;
-    expandedId: string;
-    mergeFieldId: string;
-    name: string;
-    type: string;
-    mergeField?: undefined;
-} | {
-    id: string;
-    expandedId: string;
-    mergeField: string;
-    name: string;
-    type: string;
-    mergeFieldId?: undefined;
-})[];
-export declare const getTemplateFields: (timeZone: string) => CustomRibbonSubMenuItem[];

package/dist/published/shared/RichTextEditor/utils.js

@@ -1,119 +0,0 @@
-import ReactDOM from 'react-dom';
-import { RibbonButtonItem } from 'devexpress-richedit';
-export function convertIconToSvgString(reactComponent) {
-    const container = document.createElement('div');
-    ReactDOM.render(reactComponent, container);
-    const svgString = container.innerHTML;
-    return svgString;
-}
-export const getAddressProperties = (address) => {
-    const { expandedId } = address;
-    return [
-        {
-            id: expandedId + '.line1',
-            expandedId: expandedId + '.line1',
-            mergeFieldId: expandedId + '?.line1',
-            name: address.name + ' Line 1',
-            type: 'addressField',
-        },
-        {
-            id: expandedId + '.line2',
-            expandedId: expandedId + '.line2',
-            mergeFieldId: expandedId + '?.line2',
-            name: address.name + ' Line 2',
-            type: 'addressField',
-        },
-        {
-            id: expandedId + '.city',
-            expandedId: expandedId + '.city',
-            mergeFieldId: expandedId + '?.city',
-            name: address.name + ' City',
-            type: 'addressField',
-        },
-        {
-            id: expandedId + '.state',
-            expandedId: expandedId + '.state',
-            mergeFieldId: expandedId + '?.state',
-            name: address.name + ' State',
-            type: 'addressField',
-        },
-        {
-            id: expandedId + '.zipCode',
-            expandedId: expandedId + '.zipCode',
-            mergeFieldId: expandedId + '?.zipCode',
-            name: address.name + ' Zip',
-            type: 'addressField',
-        },
-        {
-            id: expandedId + '.county',
-            expandedId: expandedId + '.county',
-            mergeField: expandedId + '?.county',
-            name: address.name + ' County',
-            type: 'addressField',
-        },
-    ];
-};
-export const getTemplateFields = (timeZone) => {
-    return [
-        {
-            beginGroup: false,
-            type: 5,
-            text: 'Date',
-            id: 'dateAtMerge',
-            mergeField: `ZonedDateTime.now(ZoneId.of("${timeZone}")).format(DateTimeFormatter.ofPattern("MMMM d, yyyy"))`,
-            fieldType: 'templateField-date',
-            items: [],
-            convertToButton: () => {
-                return new RibbonButtonItem('10000', 'Empty', {});
-            },
-        },
-        {
-            beginGroup: false,
-            type: 5,
-            text: 'Time',
-            id: 'timeAtMerge',
-            mergeField: `ZonedDateTime.now(ZoneId.of("${timeZone}")).format(DateTimeFormatter.ofPattern("h:mm a"))`,
-            fieldType: 'templateField-time',
-            items: [],
-            convertToButton: () => {
-                return new RibbonButtonItem('10000', 'Empty', {});
-            },
-        },
-        {
-            beginGroup: false,
-            type: 5,
-            text: 'Date Time',
-            id: 'dateTimeAtMerge',
-            mergeField: `ZonedDateTime.now(ZoneId.of("${timeZone}")).format(DateTimeFormatter.ofPattern("MMMM d, yyyy h:mm a"))`,
-            fieldType: 'templateField-date-time',
-            items: [],
-            convertToButton: () => {
-                return new RibbonButtonItem('10000', 'Empty', {});
-            },
-        },
-        {
-            beginGroup: false,
-            type: 5,
-            text: 'Page Number',
-            id: 'pageNumber',
-            mergeField: `PAGE`,
-            fieldType: 'templateField-pages',
-            items: [],
-            convertToButton: () => {
-                return new RibbonButtonItem('10000', 'Empty', {});
-            },
-        },
-        {
-            beginGroup: false,
-            type: 5,
-            text: 'Page Count',
-            id: 'numPages',
-            mergeField: `NUMPAGES`,
-            fieldType: 'templateField-pages',
-            items: [],
-            convertToButton: () => {
-                return new RibbonButtonItem('10000', 'Empty', {});
-            },
-        },
-    ];
-};

package/dist/published/stories/RichTextEditor.stories.d.ts

@@ -1,5 +0,0 @@
-/// <reference types="react" />
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-declare const _default: ComponentMeta<(props: import("../shared/RichTextEditor/RichTextEditor").RichTextEditorProps) => JSX.Element>;
-export default _default;
-export declare const MyRichTextEditor: ComponentStory<(props: import("../shared/RichTextEditor/RichTextEditor").RichTextEditorProps) => JSX.Element>;

package/dist/published/stories/RichTextEditor.stories.js

@@ -1,11 +0,0 @@
-import React from 'react';
-import RichTextEditor from '../shared/RichTextEditor';
-export default {
-    title: 'Input/RichTextEditor',
-    component: RichTextEditor,
-};
-const Template = (props) => {
-    //TODO: make a story that involves all of the data as either dummy data and mock functions
-    return React.createElement(RichTextEditor, Object.assign({}, props));
-};
-export const MyRichTextEditor = Template.bind({});