@pega/cosmos-react-build 2.0.0-dev.18.0 → 2.0.0-dev.21.1

package/lib/components/FlowModeller/FlowModeller.d.ts

@@ -1,13 +1,14 @@
 import { PropsWithoutRef, MouseEvent } from 'react';
 import { Action } from '@pega/cosmos-react-core';
-import { ActionParams, NodeProps, SelectedNodeParam, NodeLibraryItem } from './Node/Node.types';
+import { GraphData, ConnectorProps } from './Renderer/Utils/Graph';
+import { AddNodeHandlerParams } from './Renderer/Renderer.types';
+import { ActionParams, NodeProps, NodeLibraryItem, NodeType } from './Node/Node.types';
 export interface FlowModellerProps {
-    /** List of nodes */
-    nodes: NodeProps[];
+    graphData: GraphData<NodeProps, ConnectorProps>;
     /** Node actions */
     actions?: Action[];
     /** Callback to add node from connector */
-    onNodeAdd: (selectedNode: SelectedNodeParam) => void;
+    onNodeAdd: (nodeType: NodeType, params: AddNodeHandlerParams) => void;
     /** Callback for handling the click on the node */
     onNodeClick?: (nodeId: string) => void;
     /** Callback for actions on Node */
@@ -15,6 +16,6 @@ export interface FlowModellerProps {
     /** Types of nodes */
     nodeLibrary: NodeLibraryItem[];
 }
-declare const FlowModeller: ({ nodes, nodeLibrary, actions, onNodeAdd, onNodeClick, onNodeActionClick, ...restProps }: PropsWithoutRef<FlowModellerProps>) => JSX.Element;
+declare const FlowModeller: ({ graphData, onNodeActionClick, onNodeClick, onNodeAdd, nodeLibrary, actions }: PropsWithoutRef<FlowModellerProps>) => JSX.Element;
 export default FlowModeller;
 //# sourceMappingURL=FlowModeller.d.ts.map

package/lib/components/FlowModeller/FlowModeller.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FlowModeller.d.ts","sourceRoot":"","sources":["../../../src/components/FlowModeller/FlowModeller.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,eAAe,EAOf,UAAU,EACX,MAAM,OAAO,CAAC;AAGf,OAAO,EACL,MAAM,EAYP,MAAM,yBAAyB,CAAC;AAMjC,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEhG,MAAM,WAAW,iBAAiB;IAChC,oBAAoB;IACpB,KAAK,EAAE,SAAS,EAAE,CAAC;IACnB,mBAAmB;IACnB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,0CAA0C;IAC1C,SAAS,EAAE,CAAC,YAAY,EAAE,iBAAiB,KAAK,IAAI,CAAC;IACrD,kDAAkD;IAClD,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,mCAAmC;IACnC,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,EAAE,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACjE,qBAAqB;IACrB,WAAW,EAAE,eAAe,EAAE,CAAC;CAChC;AAMD,QAAA,MAAM,YAAY,6FAQf,gBAAgB,iBAAiB,CAAC,gBAiJpC,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"FlowModeller.d.ts","sourceRoot":"","sources":["../../../src/components/FlowModeller/FlowModeller.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAa,UAAU,EAAoC,MAAM,OAAO,CAAC;AAEjG,OAAO,EAAE,MAAM,EAA6B,MAAM,yBAAyB,CAAC;AAE5E,OAAO,EAAiB,SAAS,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAElF,OAAO,EACL,oBAAoB,EAGrB,MAAM,2BAA2B,CAAC;AAGnC,OAAO,EACL,YAAY,EACZ,SAAS,EACT,eAAe,EAGf,QAAQ,EACT,MAAM,mBAAmB,CAAC;AAG3B,MAAM,WAAW,iBAAiB;IAChC,SAAS,EAAE,SAAS,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC;IAChD,mBAAmB;IACnB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,0CAA0C;IAC1C,SAAS,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,oBAAoB,KAAK,IAAI,CAAC;IACtE,kDAAkD;IAClD,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,mCAAmC;IACnC,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,EAAE,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACjE,qBAAqB;IACrB,WAAW,EAAE,eAAe,EAAE,CAAC;CAChC;AA0ID,QAAA,MAAM,YAAY,mFAOf,gBAAgB,iBAAiB,CAAC,gBAgJpC,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/components/FlowModeller/FlowModeller.js

@@ -1,78 +1,201 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment, useState, useCallback, useRef, useEffect, useMemo } from 'react';
-import styled from 'styled-components';
-import { escapeRegExp, Flex, Icon, Menu, menuHelpers, Popover, SearchInput, useAfterInitialEffect, useElement, useI18n, useOuterEvent } from '@pega/cosmos-react-core';
-import { assignmentVisual, StartNode, EndNode, DefaultNode } from './Node/NodeTemplates';
-import { StyledIcon } from './Node/NodeTemplate.styles';
-import Connector from './Connector';
-const StyledPopover = styled(Popover) `
-  min-width: 40ch;
-`;
-const FlowModeller = ({ nodes, nodeLibrary, actions, onNodeAdd, onNodeClick, onNodeActionClick, ...restProps }) => {
-    const [open, setOpen] = useState(false);
-    const buttonRefs = useRef({});
-    const nodeRef = useRef(null);
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useReducer, useCallback } from 'react';
+import { useElement, useOuterEvent } from '@pega/cosmos-react-core';
+import { DirectedGraph } from './Renderer/Utils/Graph';
+import { AddButton } from './Renderer/AddNode';
+import FlowRenderer from './Renderer/Renderer';
+import { StartNode, EndNode, DefaultNode } from './Node/NodeTemplates';
+import { START_NODETYPE, STOP_NODETYPE } from './Node/Node.types';
+import NodeLibrary from './NodeLibrary';
+const initState = {
+    showLib: false,
+    activeAddBtnMeta: {
+        target: null,
+        meta: {
+            refType: 'node',
+            refId: ''
+        }
+    },
+    graphData: { nodes: [], connectors: [] }
+};
+const reducer = (state, action) => {
+    switch (action.type) {
+        case 'showLibrary':
+            // minor optimization, not to update state.. if no change in the value
+            return action.payload.show === state.showLib
+                ? state
+                : { ...state, showLib: action.payload.show };
+        case 'setActiveAddButton':
+            state.activeAddBtnMeta = {
+                ...action.payload
+            };
+            return {
+                ...state
+            };
+        case 'setGraphData':
+            return {
+                ...state,
+                graphData: action.payload
+            };
+        default:
+            return state;
+    }
+};
+const injectPlaceholderNodes = (graphData, onAddNode) => {
+    const targetGraph = new DirectedGraph(graphData);
+    // iterate all nodes with more than one in-connectors and insert addNode.
+    targetGraph.getNodes().forEach(node => {
+        if (targetGraph.getPrevNodesCount(node.id) > 1) {
+            const metaData = {
+                refType: 'node',
+                refId: node.id
+            };
+            // create a new placeholder node
+            const addShapeNode = {
+                id: `temp-${node.id}`,
+                children: (_jsx(AddButton, { addNodeHandler: (e) => {
+                        onAddNode(e.target, metaData);
+                    } }, void 0)),
+                position: { x: 0, y: 0 },
+                dimensions: { width: 20, height: 16 }
+            };
+            targetGraph.addNode(addShapeNode);
+            // connect all in-connectors to a new node and create a new connector that connects from new node to the actual toNodeId.
+            targetGraph.getInConnectors(node.id).forEach(con => {
+                con.toNodeId = addShapeNode.id;
+            });
+            const newConnector = {
+                id: `placeholder-${addShapeNode.id}-${node.id}`,
+                fromNodeId: addShapeNode.id,
+                toNodeId: node.id,
+                points: []
+            };
+            targetGraph.addConnector(newConnector);
+        }
+    });
+    // iterate all connectors and inject addNodes.
+    targetGraph.getConnectors().forEach((con) => {
+        // Condition to skip processing placeholder connectors created in the previous step
+        if (con.id.startsWith('placeholder-')) {
+            return;
+        }
+        const metaData = {
+            refType: 'connector',
+            refId: con.id
+        };
+        const addShapeNode = {
+            id: `temp-con-${con.id}`,
+            children: (_jsx(AddButton, { addNodeHandler: (e) => {
+                    onAddNode(e.target, metaData);
+                } }, void 0)),
+            position: { x: 0, y: 0 },
+            dimensions: { width: 20, height: 16 }
+        };
+        targetGraph.addNode(addShapeNode);
+        const newConnector = {
+            id: `con-${con.id}`,
+            fromNodeId: addShapeNode.id,
+            toNodeId: con.toNodeId,
+            points: []
+        };
+        targetGraph.addConnector(newConnector);
+        con.toNodeId = addShapeNode.id;
+    });
+    return targetGraph.getGraphData();
+};
+const FlowModeller = ({ graphData, onNodeActionClick, onNodeClick, onNodeAdd, nodeLibrary, actions }) => {
+    const [state, dispatch] = useReducer(reducer, initState);
     const [popoverEl, setPopoverEl] = useElement(null);
-    const [previousNodeId, setPreviousNodeId] = useState('');
-    const [search, setSearch] = useState('');
-    const searchElRef = useRef(null);
-    const t = useI18n();
-    const searchRegex = useMemo(() => {
-        return new RegExp(escapeRegExp(search));
-    }, [search]);
-    const closeMenu = useCallback(() => {
-        setOpen(false);
-    }, []);
-    const onItemSelect = useCallback(id => {
-        const selectedNode = menuHelpers.getItem(nodeLibrary, id);
-        onNodeAdd({ nodeId: previousNodeId, node: selectedNode });
+    useEffect(() => {
+        const flowNodes = graphData.nodes.map(node => {
+            const flowNode = {
+                ...node,
+                children: _jsx(_Fragment, {}, void 0),
+                dimensions: {
+                    width: 280,
+                    height: 120
+                },
+                position: {
+                    x: 0,
+                    y: 0
+                }
+            };
+            if (node.type.id === START_NODETYPE.id) {
+                flowNode.dimensions.width = 50;
+                flowNode.dimensions.height = 50;
+                flowNode.children = (_jsx(StartNode, { id: node.id, type: node.type, label: node.label.toUpperCase() }, void 0));
+            }
+            else if (node.type.id === STOP_NODETYPE.id) {
+                flowNode.dimensions.width = 50;
+                flowNode.dimensions.height = 50;
+                flowNode.children = (_jsx(EndNode, { id: node.id, type: node.type, label: node.label.toUpperCase() }, void 0));
+            }
+            else {
+                flowNode.children = (_jsx(DefaultNode, { id: node.id, label: node.label, type: node.type, description: node.description, onActionClick: onNodeActionClick, onClick: onNodeClick, actions: actions, additionalData: node.additionalData }, void 0));
+            }
+            return flowNode;
+        });
+        const connectors = graphData.connectors.map(connector => {
+            return {
+                ...connector,
+                points: [],
+                data: {
+                    label: connector.label
+                }
+            };
+        });
+        dispatch({
+            type: 'setGraphData',
+            payload: { nodes: flowNodes, connectors }
+        });
+    }, [graphData]);
+    /**
+     * Library popover functionality
+     */
+    const closeMenu = () => {
+        dispatch({
+            type: 'showLibrary',
+            payload: {
+                show: false
+            }
+        });
+    };
+    const onLibraryItemSelect = useCallback((libItem) => {
+        onNodeAdd(libItem.type, state.activeAddBtnMeta.meta);
         closeMenu();
-    }, [previousNodeId]);
+    }, [state.activeAddBtnMeta] // TODO VERIFY whether this parameter helps or not
+    );
     const onKeydown = useCallback((e) => {
         if (e.key === 'Escape') {
             closeMenu();
         }
     }, [closeMenu]);
-    useOuterEvent('mousedown', [popoverEl, buttonRefs.current[previousNodeId]], closeMenu);
-    useEffect(() => {
-        if (open) {
-            searchElRef?.current?.focus();
-        }
-    }, [open, searchElRef.current]);
+    useOuterEvent('mousedown', [popoverEl], closeMenu);
     useEffect(() => {
         document.addEventListener('keydown', onKeydown);
         return () => {
             document.removeEventListener('keydown', onKeydown);
         };
-    }, [onKeydown]);
-    useAfterInitialEffect(() => {
-        nodeRef?.current?.focus();
-    }, [nodes]);
+    }, []);
     const items = nodeLibrary !== undefined ? nodeLibrary : [];
-    const itemsToRender = useMemo(() => {
-        return menuHelpers.mapTree(search
-            ? menuHelpers.flatten(items).filter(({ primary }) => {
-                return searchRegex.test(primary);
-            })
-            : items, node => {
-            const selectable = !node.items;
-            const nodeItem = node;
-            return {
-                ...node,
-                visual: nodeItem.type ? (_jsx(StyledIcon, Object.assign({ id: node.id, type: nodeItem.type }, { children: _jsx(Icon, { name: assignmentVisual[nodeItem.type] }, void 0) }), void 0)) : undefined,
-                count: node.items ? node.items.length : undefined,
-                secondary: node.secondary,
-                selected: selectable ? !!node.selected : undefined
-            };
+    const onNodeCreate = (el, meta) => {
+        dispatch({
+            type: 'setActiveAddButton',
+            payload: {
+                target: el,
+                meta
+            }
+        });
+        // TODO try to merge both the above and below dispatches into one
+        dispatch({
+            type: 'showLibrary',
+            payload: {
+                show: true
+            }
         });
-    }, [search, nodeLibrary, searchRegex]);
-    return (_jsxs(Flex, Object.assign({ container: { justify: 'center', direction: 'column' } }, restProps, { children: [nodes.map(node => (_jsxs(Fragment, { children: [node.type === 'start' && (_jsx(StartNode, { id: node.id, type: node.type, label: t('start').toUpperCase() }, void 0)), node.type !== 'start' && node.type !== 'stop' && (_jsx(DefaultNode, { id: node.id, ref: nodeRef, label: node.label, type: node.type, description: node.description, onActionClick: onNodeActionClick, onClick: onNodeClick, actions: actions, additionalData: node.additionalData }, void 0)), node.type === 'stop' && (_jsx(EndNode, { id: node.id, type: node.type, label: t('end').toUpperCase() }, void 0)), node.connectors &&
-                        node.connectors?.map(({ id, label, targetNodeId }) => (_jsx(Connector, { id: id, label: label, ref: el => {
-                                buttonRefs.current[node.id] = el;
-                            }, targetNodeId: targetNodeId, onAddClick: () => {
-                                setPreviousNodeId(node.id);
-                                setOpen(cur => !cur);
-                            }, active: open && previousNodeId === node.id }, id)))] }, node.id))), _jsx(StyledPopover, Object.assign({ show: open, target: previousNodeId ? buttonRefs.current[previousNodeId] : null, ref: setPopoverEl }, { children: _jsx(Menu, { items: itemsToRender, onItemClick: onItemSelect, header: _jsx(SearchInput, { ref: searchElRef, onSearchChange: setSearch, value: search, searchInputAriaLabel: t('search_nodes'), placeholder: t('search_nodes') }, void 0) }, void 0) }), void 0)] }), void 0));
+    };
+    const newGraphData = injectPlaceholderNodes(state.graphData, onNodeCreate);
+    return (_jsxs("div", { children: [_jsx(FlowRenderer, { graphData: newGraphData }, void 0), _jsx(NodeLibrary, { show: state.showLib, target: state.activeAddBtnMeta.target, items: items, onClick: onLibraryItemSelect, ref: setPopoverEl }, void 0)] }, void 0));
 };
 export default FlowModeller;
 //# sourceMappingURL=FlowModeller.js.map

package/lib/components/FlowModeller/FlowModeller.js.map

@@ -1 +1 @@
-{"version":3,"file":"FlowModeller.js","sourceRoot":"","sources":["../../../src/components/FlowModeller/FlowModeller.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  PropsWithoutRef,\n  Fragment,\n  useState,\n  useCallback,\n  useRef,\n  useEffect,\n  useMemo,\n  MouseEvent\n} from 'react';\nimport styled from 'styled-components';\n\nimport {\n  Action,\n  escapeRegExp,\n  Flex,\n  Icon,\n  Menu,\n  menuHelpers,\n  Popover,\n  SearchInput,\n  useAfterInitialEffect,\n  useElement,\n  useI18n,\n  useOuterEvent\n} from '@pega/cosmos-react-core';\nimport { MenuItemProps } from '@pega/cosmos-react-core/lib/components/Menu/Menu.types';\n\nimport { assignmentVisual, StartNode, EndNode, DefaultNode } from './Node/NodeTemplates';\nimport { StyledIcon } from './Node/NodeTemplate.styles';\nimport Connector from './Connector';\nimport { ActionParams, NodeProps, SelectedNodeParam, NodeLibraryItem } from './Node/Node.types';\n\nexport interface FlowModellerProps {\n  /** List of nodes */\n  nodes: NodeProps[];\n  /** Node actions */\n  actions?: Action[];\n  /** Callback to add node from connector */\n  onNodeAdd: (selectedNode: SelectedNodeParam) => void;\n  /** Callback for handling the click on the node */\n  onNodeClick?: (nodeId: string) => void;\n  /** Callback for actions on Node */\n  onNodeActionClick?: (param: ActionParams, e: MouseEvent) => void;\n  /** Types of nodes */\n  nodeLibrary: NodeLibraryItem[];\n}\n\nconst StyledPopover: typeof Popover = styled(Popover)`\n  min-width: 40ch;\n`;\n\nconst FlowModeller = ({\n  nodes,\n  nodeLibrary,\n  actions,\n  onNodeAdd,\n  onNodeClick,\n  onNodeActionClick,\n  ...restProps\n}: PropsWithoutRef<FlowModellerProps>) => {\n  const [open, setOpen] = useState(false);\n  const buttonRefs = useRef<{ [key: string]: HTMLButtonElement | null }>({});\n  const nodeRef = useRef<HTMLElement>(null);\n  const [popoverEl, setPopoverEl] = useElement<HTMLElement>(null);\n  const [previousNodeId, setPreviousNodeId] = useState('');\n  const [search, setSearch] = useState('');\n  const searchElRef = useRef<HTMLInputElement>(null);\n  const t = useI18n();\n  const searchRegex = useMemo(() => {\n    return new RegExp(escapeRegExp(search));\n  }, [search]);\n\n  const closeMenu = useCallback(() => {\n    setOpen(false);\n  }, []);\n\n  const onItemSelect = useCallback(\n    id => {\n      const selectedNode = menuHelpers.getItem(nodeLibrary, id) as NodeLibraryItem;\n      onNodeAdd({ nodeId: previousNodeId, node: selectedNode });\n      closeMenu();\n    },\n    [previousNodeId]\n  );\n\n  const onKeydown = useCallback(\n    (e: KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        closeMenu();\n      }\n    },\n    [closeMenu]\n  );\n\n  useOuterEvent('mousedown', [popoverEl, buttonRefs.current[previousNodeId]], closeMenu);\n\n  useEffect(() => {\n    if (open) {\n      searchElRef?.current?.focus();\n    }\n  }, [open, searchElRef.current]);\n\n  useEffect(() => {\n    document.addEventListener('keydown', onKeydown);\n    return () => {\n      document.removeEventListener('keydown', onKeydown);\n    };\n  }, [onKeydown]);\n\n  useAfterInitialEffect(() => {\n    nodeRef?.current?.focus();\n  }, [nodes]);\n\n  const items: NodeLibraryItem[] = nodeLibrary !== undefined ? nodeLibrary : [];\n\n  const itemsToRender = useMemo(() => {\n    return menuHelpers.mapTree(\n      search\n        ? menuHelpers.flatten(items).filter(({ primary }: MenuItemProps) => {\n            return searchRegex.test(primary);\n          })\n        : items,\n      node => {\n        const selectable = !node.items;\n\n        const nodeItem: NodeLibraryItem = node as NodeLibraryItem;\n        return {\n          ...node,\n          visual: nodeItem.type ? (\n            <StyledIcon id={node.id} type={nodeItem.type}>\n              <Icon name={assignmentVisual[nodeItem.type]} />\n            </StyledIcon>\n          ) : undefined,\n          count: node.items ? node.items.length : undefined,\n          secondary: node.secondary,\n          selected: selectable ? !!node.selected : undefined\n        };\n      }\n    );\n  }, [search, nodeLibrary, searchRegex]);\n\n  return (\n    <Flex container={{ justify: 'center', direction: 'column' }} {...restProps}>\n      {nodes.map(node => (\n        <Fragment key={node.id}>\n          {node.type === 'start' && (\n            <StartNode id={node.id} type={node.type} label={t('start').toUpperCase()} />\n          )}\n          {node.type !== 'start' && node.type !== 'stop' && (\n            <DefaultNode\n              id={node.id}\n              ref={nodeRef}\n              label={node.label}\n              type={node.type}\n              description={node.description}\n              onActionClick={onNodeActionClick}\n              onClick={onNodeClick}\n              actions={actions}\n              additionalData={node.additionalData}\n            />\n          )}\n          {node.type === 'stop' && (\n            <EndNode id={node.id} type={node.type} label={t('end').toUpperCase()} />\n          )}\n          {node.connectors &&\n            node.connectors?.map(({ id, label, targetNodeId }) => (\n              <Connector\n                key={id}\n                id={id}\n                label={label}\n                ref={el => {\n                  buttonRefs.current[node.id] = el;\n                }}\n                targetNodeId={targetNodeId}\n                onAddClick={() => {\n                  setPreviousNodeId(node.id);\n                  setOpen(cur => !cur);\n                }}\n                active={open && previousNodeId === node.id}\n              />\n            ))}\n        </Fragment>\n      ))}\n      <StyledPopover\n        show={open}\n        target={previousNodeId ? buttonRefs.current[previousNodeId] : null}\n        ref={setPopoverEl}\n      >\n        <Menu\n          items={itemsToRender}\n          onItemClick={onItemSelect}\n          header={\n            <SearchInput\n              ref={searchElRef}\n              onSearchChange={setSearch}\n              value={search}\n              searchInputAriaLabel={t('search_nodes')}\n              placeholder={t('search_nodes')}\n            />\n          }\n        />\n      </StyledPopover>\n    </Flex>\n  );\n};\n\nexport default FlowModeller;\n"]}
+{"version":3,"file":"FlowModeller.js","sourceRoot":"","sources":["../../../src/components/FlowModeller/FlowModeller.tsx"],"names":[],"mappings":"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","sourcesContent":["import { PropsWithoutRef, useEffect, MouseEvent, useReducer, Reducer, useCallback } from 'react';\n\nimport { Action, useElement, useOuterEvent } from '@pega/cosmos-react-core';\n\nimport { DirectedGraph, GraphData, ConnectorProps } from './Renderer/Utils/Graph';\nimport { AddButton } from './Renderer/AddNode';\nimport {\n  AddNodeHandlerParams,\n  RendererConnectorProps,\n  RendererNodeProps\n} from './Renderer/Renderer.types';\nimport FlowRenderer from './Renderer/Renderer';\nimport { StartNode, EndNode, DefaultNode } from './Node/NodeTemplates';\nimport {\n  ActionParams,\n  NodeProps,\n  NodeLibraryItem,\n  START_NODETYPE,\n  STOP_NODETYPE,\n  NodeType\n} from './Node/Node.types';\nimport NodeLibrary from './NodeLibrary';\n\nexport interface FlowModellerProps {\n  graphData: GraphData<NodeProps, ConnectorProps>;\n  /** Node actions */\n  actions?: Action[];\n  /** Callback to add node from connector */\n  onNodeAdd: (nodeType: NodeType, params: AddNodeHandlerParams) => void;\n  /** Callback for handling the click on the node */\n  onNodeClick?: (nodeId: string) => void;\n  /** Callback for actions on Node */\n  onNodeActionClick?: (param: ActionParams, e: MouseEvent) => void;\n  /** Types of nodes */\n  nodeLibrary: NodeLibraryItem[];\n}\n\ntype ModellerState = {\n  showLib: boolean;\n  activeAddBtnMeta: {\n    target: null; // we will maintain ref of an Element\n    meta: AddNodeHandlerParams;\n  };\n  graphData: GraphData<RendererNodeProps, RendererConnectorProps>;\n};\n\nconst initState: ModellerState = {\n  showLib: false,\n  activeAddBtnMeta: {\n    target: null,\n    meta: {\n      refType: 'node',\n      refId: ''\n    }\n  },\n  graphData: { nodes: [], connectors: [] }\n};\n\nconst reducer = (state: ModellerState, action: { type: string; payload: any }) => {\n  switch (action.type) {\n    case 'showLibrary':\n      // minor optimization, not to update state.. if no change in the value\n      return action.payload.show === state.showLib\n        ? state\n        : { ...state, showLib: action.payload.show };\n    case 'setActiveAddButton':\n      state.activeAddBtnMeta = {\n        ...action.payload\n      };\n      return {\n        ...state\n      };\n    case 'setGraphData':\n      return {\n        ...state,\n        graphData: action.payload\n      };\n    default:\n      return state;\n  }\n};\n\ninterface AddNodeProps extends RendererNodeProps {\n  onClick?: (ev: Event) => void;\n}\n\nconst injectPlaceholderNodes: (\n  graphData: GraphData<RendererNodeProps, RendererConnectorProps>,\n  onAddNode: (el: HTMLElement, meta: AddNodeHandlerParams) => void\n) => GraphData<RendererNodeProps, RendererConnectorProps> = (graphData, onAddNode) => {\n  const targetGraph = new DirectedGraph(graphData);\n\n  // iterate all nodes with more than one in-connectors and insert addNode.\n  targetGraph.getNodes().forEach(node => {\n    if (targetGraph.getPrevNodesCount(node.id) > 1) {\n      const metaData: AddNodeHandlerParams = {\n        refType: 'node',\n        refId: node.id\n      };\n\n      // create a new placeholder node\n      const addShapeNode: AddNodeProps = {\n        id: `temp-${node.id}`,\n        children: (\n          <AddButton\n            addNodeHandler={(e: MouseEvent<HTMLButtonElement>) => {\n              onAddNode(e.target as HTMLElement, metaData);\n            }}\n          />\n        ),\n        position: { x: 0, y: 0 },\n        dimensions: { width: 20, height: 16 }\n      };\n\n      targetGraph.addNode(addShapeNode);\n\n      // connect all in-connectors to a new node and create a new connector that connects from new node to the actual toNodeId.\n      targetGraph.getInConnectors(node.id).forEach(con => {\n        con.toNodeId = addShapeNode.id;\n      });\n\n      const newConnector: RendererConnectorProps = {\n        id: `placeholder-${addShapeNode.id}-${node.id}`,\n        fromNodeId: addShapeNode.id,\n        toNodeId: node.id,\n        points: []\n      };\n\n      targetGraph.addConnector(newConnector);\n    }\n  });\n\n  // iterate all connectors and inject addNodes.\n  targetGraph.getConnectors().forEach((con: RendererConnectorProps) => {\n    // Condition to skip processing placeholder connectors created in the previous step\n    if (con.id.startsWith('placeholder-')) {\n      return;\n    }\n\n    const metaData: AddNodeHandlerParams = {\n      refType: 'connector',\n      refId: con.id\n    };\n\n    const addShapeNode: AddNodeProps = {\n      id: `temp-con-${con.id}`,\n      children: (\n        <AddButton\n          addNodeHandler={(e: MouseEvent<HTMLButtonElement>) => {\n            onAddNode(e.target as HTMLElement, metaData);\n          }}\n        />\n      ),\n      position: { x: 0, y: 0 },\n      dimensions: { width: 20, height: 16 }\n    };\n\n    targetGraph.addNode(addShapeNode);\n\n    const newConnector: RendererConnectorProps = {\n      id: `con-${con.id}`,\n      fromNodeId: addShapeNode.id,\n      toNodeId: con.toNodeId,\n      points: []\n    };\n\n    targetGraph.addConnector(newConnector);\n    con.toNodeId = addShapeNode.id;\n  });\n\n  return targetGraph.getGraphData();\n};\n\nconst FlowModeller = ({\n  graphData,\n  onNodeActionClick,\n  onNodeClick,\n  onNodeAdd,\n  nodeLibrary,\n  actions\n}: PropsWithoutRef<FlowModellerProps>) => {\n  const [state, dispatch] = useReducer<Reducer<ModellerState, any>>(reducer, initState);\n\n  const [popoverEl, setPopoverEl] = useElement<HTMLElement>(null);\n\n  useEffect(() => {\n    const flowNodes: RendererNodeProps[] = graphData.nodes.map(node => {\n      const flowNode: RendererNodeProps = {\n        ...node,\n        children: <></>,\n        dimensions: {\n          width: 280,\n          height: 120\n        },\n        position: {\n          x: 0,\n          y: 0\n        }\n      };\n\n      if (node.type.id === START_NODETYPE.id) {\n        flowNode.dimensions.width = 50;\n        flowNode.dimensions.height = 50;\n\n        flowNode.children = (\n          <StartNode id={node.id} type={node.type} label={node.label.toUpperCase()} />\n        );\n      } else if (node.type.id === STOP_NODETYPE.id) {\n        flowNode.dimensions.width = 50;\n        flowNode.dimensions.height = 50;\n\n        flowNode.children = (\n          <EndNode id={node.id} type={node.type} label={node.label.toUpperCase()} />\n        );\n      } else {\n        flowNode.children = (\n          <DefaultNode\n            id={node.id}\n            label={node.label}\n            type={node.type}\n            description={node.description}\n            onActionClick={onNodeActionClick}\n            onClick={onNodeClick}\n            actions={actions}\n            additionalData={node.additionalData}\n          />\n        );\n      }\n\n      return flowNode;\n    });\n\n    const connectors: RendererConnectorProps[] = graphData.connectors.map(connector => {\n      return {\n        ...connector,\n        points: [],\n        data: {\n          label: connector.label\n        }\n      };\n    });\n\n    dispatch({\n      type: 'setGraphData',\n      payload: { nodes: flowNodes, connectors }\n    });\n  }, [graphData]);\n\n  /**\n   * Library popover functionality\n   */\n  const closeMenu = () => {\n    dispatch({\n      type: 'showLibrary',\n      payload: {\n        show: false\n      }\n    });\n  };\n\n  const onLibraryItemSelect = useCallback(\n    (libItem: NodeLibraryItem) => {\n      onNodeAdd(libItem.type, state.activeAddBtnMeta.meta);\n\n      closeMenu();\n    },\n    [state.activeAddBtnMeta] // TODO VERIFY whether this parameter helps or not\n  );\n\n  const onKeydown = useCallback(\n    (e: KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        closeMenu();\n      }\n    },\n    [closeMenu]\n  );\n\n  useOuterEvent('mousedown', [popoverEl], closeMenu);\n\n  useEffect(() => {\n    document.addEventListener('keydown', onKeydown);\n    return () => {\n      document.removeEventListener('keydown', onKeydown);\n    };\n  }, []);\n\n  const items: NodeLibraryItem[] = nodeLibrary !== undefined ? nodeLibrary : [];\n\n  const onNodeCreate = (el: HTMLElement, meta: AddNodeHandlerParams) => {\n    dispatch({\n      type: 'setActiveAddButton',\n      payload: {\n        target: el,\n        meta\n      }\n    });\n\n    // TODO try to merge both the above and below dispatches into one\n    dispatch({\n      type: 'showLibrary',\n      payload: {\n        show: true\n      }\n    });\n  };\n\n  const newGraphData: GraphData<RendererNodeProps, RendererConnectorProps> = injectPlaceholderNodes(\n    state.graphData,\n    onNodeCreate\n  );\n\n  return (\n    <div>\n      <FlowRenderer graphData={newGraphData} />\n      <NodeLibrary\n        show={state.showLib}\n        target={state.activeAddBtnMeta.target}\n        items={items}\n        onClick={onLibraryItemSelect}\n        ref={setPopoverEl}\n      />\n    </div>\n  );\n};\n\nexport default FlowModeller;\n"]}

package/lib/components/FlowModeller/Node/Node.types.d.ts

@@ -1,7 +1,20 @@
 import { Ref, MouseEvent } from 'react';
-import { Action, MenuItemProps } from '@pega/cosmos-react-core';
-import { ConnectorProps } from '../Connector';
-export interface NodeProps {
+import { Action, MenuItemProps, OmitStrict } from '@pega/cosmos-react-core';
+import { Node } from '../Renderer/Utils/Graph';
+export interface NodeType {
+    id: string;
+    name: string;
+    color: string;
+    icon: string;
+    minConnectors: number;
+    defaults: {
+        node: OmitStrict<NodeProps, 'type' | 'id'>;
+        connector: {
+            label: string;
+        }[];
+    };
+}
+export interface NodeProps extends Node {
     /** Unique id for Node */
     id: string;
     /** Label for Node */
@@ -9,14 +22,8 @@ export interface NodeProps {
     /** Description for Node */
     description?: string;
     /** Additional data for Node */
-    additionalData?: {
-        label: string;
-        value: string;
-    }[];
-    /** Type of the Node */
-    type: 'start' | 'stop' | 'assignment' | 'decision' | 'question' | 'message' | 'automation';
-    /** Connectors for the node */
-    connectors?: ConnectorProps[];
+    additionalData?: AdditionalDataItemProps[];
+    type: NodeType;
 }
 export interface NodeComponentProps extends NodeProps {
     /** Callback for the node actions click */
@@ -28,17 +35,20 @@ export interface NodeComponentProps extends NodeProps {
     /** Ref of the node */
     ref?: Ref<HTMLElement>;
 }
+export interface AdditionalDataItemProps {
+    id: string;
+    label: string;
+    value: string;
+}
 export interface ActionParams {
     actionId: string;
     nodeId: NodeProps['id'];
 }
-export interface SelectedNodeParam {
-    nodeId: NodeProps['id'];
-    node: NodeLibraryItem;
-}
 export interface NodeLibraryItem extends MenuItemProps {
     id: string;
-    type?: NodeProps['type'];
+    type: NodeType;
     items?: NodeLibraryItem[];
 }
+export declare const START_NODETYPE: NodeType;
+export declare const STOP_NODETYPE: NodeType;
 //# sourceMappingURL=Node.types.d.ts.map

package/lib/components/FlowModeller/Node/Node.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Node.types.d.ts","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Node/Node.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAExC,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAEhE,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAE9C,MAAM,WAAW,SAAS;IACxB,yBAAyB;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,qBAAqB;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,2BAA2B;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+BAA+B;IAC/B,cAAc,CAAC,EAAE;QACf,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,MAAM,CAAC;KACf,EAAE,CAAC;IACJ,uBAAuB;IACvB,IAAI,EAAE,OAAO,GAAG,MAAM,GAAG,YAAY,GAAG,UAAU,GAAG,UAAU,GAAG,SAAS,GAAG,YAAY,CAAC;IAC3F,8BAA8B;IAC9B,UAAU,CAAC,EAAE,cAAc,EAAE,CAAC;CAC/B;AAED,MAAM,WAAW,kBAAmB,SAAQ,SAAS;IACnD,0CAA0C;IAC1C,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,EAAE,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAC9D,kCAAkC;IAClC,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,SAAS,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IAC5C,iCAAiC;IACjC,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,sBAAsB;IACtB,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAED,MAAM,WAAW,YAAY;IAC3B,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,SAAS,CAAC,IAAI,CAAC,CAAC;CACzB;AAED,MAAM,WAAW,iBAAiB;IAChC,MAAM,EAAE,SAAS,CAAC,IAAI,CAAC,CAAC;IACxB,IAAI,EAAE,eAAe,CAAC;CACvB;AAED,MAAM,WAAW,eAAgB,SAAQ,aAAa;IACpD,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IACzB,KAAK,CAAC,EAAE,eAAe,EAAE,CAAC;CAC3B"}
+{"version":3,"file":"Node.types.d.ts","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Node/Node.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAExC,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,UAAU,EAAmB,MAAM,yBAAyB,CAAC;AAE7F,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAE/C,MAAM,WAAW,QAAQ;IAEvB,EAAE,EAAE,MAAM,CAAC;IAEX,IAAI,EAAE,MAAM,CAAC;IAEb,KAAK,EAAE,MAAM,CAAC;IAEd,IAAI,EAAE,MAAM,CAAC;IAEb,aAAa,EAAE,MAAM,CAAC;IACtB,QAAQ,EAAE;QACR,IAAI,EAAE,UAAU,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC,CAAC;QAC3C,SAAS,EAAE;YACT,KAAK,EAAE,MAAM,CAAC;SACf,EAAE,CAAC;KACL,CAAC;CACH;AAED,MAAM,WAAW,SAAU,SAAQ,IAAI;IACrC,yBAAyB;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,qBAAqB;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,2BAA2B;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+BAA+B;IAC/B,cAAc,CAAC,EAAE,uBAAuB,EAAE,CAAC;IAE3C,IAAI,EAAE,QAAQ,CAAC;CAChB;AAED,MAAM,WAAW,kBAAmB,SAAQ,SAAS;IACnD,0CAA0C;IAC1C,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,EAAE,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAC9D,kCAAkC;IAClC,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,SAAS,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IAC5C,iCAAiC;IACjC,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,sBAAsB;IACtB,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAED,MAAM,WAAW,uBAAuB;IACtC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AACD,MAAM,WAAW,YAAY;IAC3B,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,SAAS,CAAC,IAAI,CAAC,CAAC;CACzB;AAED,MAAM,WAAW,eAAgB,SAAQ,aAAa;IACpD,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,QAAQ,CAAC;IACf,KAAK,CAAC,EAAE,eAAe,EAAE,CAAC;CAC3B;AAED,eAAO,MAAM,cAAc,EAAE,QAY3B,CAAC;AAEH,eAAO,MAAM,aAAa,EAAE,QAY1B,CAAC"}

package/lib/components/FlowModeller/Node/Node.types.js

@@ -1,2 +1,28 @@
-export {};
+import { themeDefinition } from '@pega/cosmos-react-core';
+export const START_NODETYPE = Object.freeze({
+    id: 'start',
+    name: 'start',
+    color: themeDefinition.base.colors.green.medium.$value,
+    icon: 'circle',
+    minConnectors: 1,
+    defaults: {
+        node: {
+            label: 'Start'
+        },
+        connector: []
+    }
+});
+export const STOP_NODETYPE = Object.freeze({
+    id: 'stop',
+    name: 'stop',
+    color: themeDefinition.base.colors.red.light.$value,
+    icon: 'circle',
+    minConnectors: 0,
+    defaults: {
+        node: {
+            label: 'Stop'
+        },
+        connector: []
+    }
+});
 //# sourceMappingURL=Node.types.js.map

package/lib/components/FlowModeller/Node/Node.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"Node.types.js","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Node/Node.types.ts"],"names":[],"mappings":"","sourcesContent":["import { Ref, MouseEvent } from 'react';\n\nimport { Action, MenuItemProps } from '@pega/cosmos-react-core';\n\nimport { ConnectorProps } from '../Connector';\n\nexport interface NodeProps {\n  /** Unique id for Node */\n  id: string;\n  /** Label for Node */\n  label: string;\n  /** Description for Node */\n  description?: string;\n  /** Additional data for Node */\n  additionalData?: {\n    label: string;\n    value: string;\n  }[];\n  /** Type of the Node */\n  type: 'start' | 'stop' | 'assignment' | 'decision' | 'question' | 'message' | 'automation';\n  /** Connectors for the node */\n  connectors?: ConnectorProps[];\n}\n\nexport interface NodeComponentProps extends NodeProps {\n  /** Callback for the node actions click */\n  onActionClick?: (params: ActionParams, e: MouseEvent) => void;\n  /** Callback for the node click */\n  onClick?: (nodeId: NodeProps['id']) => void;\n  /** Actions for the node click */\n  actions?: Action[];\n  /** Ref of the node */\n  ref?: Ref<HTMLElement>;\n}\n\nexport interface ActionParams {\n  actionId: string;\n  nodeId: NodeProps['id'];\n}\n\nexport interface SelectedNodeParam {\n  nodeId: NodeProps['id'];\n  node: NodeLibraryItem;\n}\n\nexport interface NodeLibraryItem extends MenuItemProps {\n  id: string;\n  type?: NodeProps['type'];\n  items?: NodeLibraryItem[];\n}\n"]}
+{"version":3,"file":"Node.types.js","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Node/Node.types.ts"],"names":[],"mappings":"AAEA,OAAO,EAAqC,eAAe,EAAE,MAAM,yBAAyB,CAAC;AA+D7F,MAAM,CAAC,MAAM,cAAc,GAAa,MAAM,CAAC,MAAM,CAAC;IACpD,EAAE,EAAE,OAAO;IACX,IAAI,EAAE,OAAO;IACb,KAAK,EAAE,eAAe,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM;IACtD,IAAI,EAAE,QAAQ;IACd,aAAa,EAAE,CAAC;IAChB,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,KAAK,EAAE,OAAO;SACf;QACD,SAAS,EAAE,EAAE;KACd;CACF,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,aAAa,GAAa,MAAM,CAAC,MAAM,CAAC;IACnD,EAAE,EAAE,MAAM;IACV,IAAI,EAAE,MAAM;IACZ,KAAK,EAAE,eAAe,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,MAAM;IACnD,IAAI,EAAE,QAAQ;IACd,aAAa,EAAE,CAAC;IAChB,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,KAAK,EAAE,MAAM;SACd;QACD,SAAS,EAAE,EAAE;KACd;CACF,CAAC,CAAC","sourcesContent":["import { Ref, MouseEvent } from 'react';\n\nimport { Action, MenuItemProps, OmitStrict, themeDefinition } from '@pega/cosmos-react-core';\n\nimport { Node } from '../Renderer/Utils/Graph';\n\nexport interface NodeType {\n  /* node type id. this must be unique */\n  id: string;\n  /* human readable name of the type */\n  name: string;\n  /* color that represents the type */\n  color: string;\n  /* icon that represents the type */\n  icon: string;\n  /* min no. of connectors */\n  minConnectors: number;\n  defaults: {\n    node: OmitStrict<NodeProps, 'type' | 'id'>;\n    connector: {\n      label: string;\n    }[];\n  };\n}\n\nexport interface NodeProps extends Node {\n  /** Unique id for Node */\n  id: string;\n  /** Label for Node */\n  label: string;\n  /** Description for Node */\n  description?: string;\n  /** Additional data for Node */\n  additionalData?: AdditionalDataItemProps[];\n  /* type of the Node */\n  type: NodeType;\n}\n\nexport interface NodeComponentProps extends NodeProps {\n  /** Callback for the node actions click */\n  onActionClick?: (params: ActionParams, e: MouseEvent) => void;\n  /** Callback for the node click */\n  onClick?: (nodeId: NodeProps['id']) => void;\n  /** Actions for the node click */\n  actions?: Action[];\n  /** Ref of the node */\n  ref?: Ref<HTMLElement>;\n}\n\nexport interface AdditionalDataItemProps {\n  id: string;\n  label: string;\n  value: string;\n}\nexport interface ActionParams {\n  actionId: string;\n  nodeId: NodeProps['id'];\n}\n\nexport interface NodeLibraryItem extends MenuItemProps {\n  id: string;\n  type: NodeType;\n  items?: NodeLibraryItem[];\n}\n\nexport const START_NODETYPE: NodeType = Object.freeze({\n  id: 'start',\n  name: 'start',\n  color: themeDefinition.base.colors.green.medium.$value,\n  icon: 'circle',\n  minConnectors: 1,\n  defaults: {\n    node: {\n      label: 'Start'\n    },\n    connector: []\n  }\n});\n\nexport const STOP_NODETYPE: NodeType = Object.freeze({\n  id: 'stop',\n  name: 'stop',\n  color: themeDefinition.base.colors.red.light.$value,\n  icon: 'circle',\n  minConnectors: 0,\n  defaults: {\n    node: {\n      label: 'Stop'\n    },\n    connector: []\n  }\n});\n"]}

package/lib/components/FlowModeller/Node/NodeTemplate.styles.d.ts

@@ -1,14 +1,19 @@
-import { NodeProps } from './Node.types';
+import { NodeType } from './Node.types';
 export declare const StyledCircle: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
-    type: string;
+    color: NodeType['color'];
 }, never>;
 export declare const StyledLabel: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").LabelProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {
-    type: string;
+    type: NodeType;
+}, never>;
+export declare const StyledIcon: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    color: string;
 }, never>;
-export declare const StyledIcon: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Pick<NodeProps, "type">, never>;
 export declare const StyledCardHeader: import("styled-components").StyledComponent<"header", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledText: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").TextProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledCard: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").CardProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledCardFooter: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").CardFooterProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledCardContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledAdditionalData: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledAdditionalData: import("styled-components").StyledComponent<"dl", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledAdditionalDataItem: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledTextWithEllipsis: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").TextProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
 //# sourceMappingURL=NodeTemplate.styles.d.ts.map

package/lib/components/FlowModeller/Node/NodeTemplate.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NodeTemplate.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Node/NodeTemplate.styles.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC,eAAO,MAAM,YAAY;UAAsB,MAAM;SAanD,CAAC;AAIH,eAAO,MAAM,WAAW;UAAyB,MAAM;SAWrD,CAAC;AAIH,eAAO,MAAM,UAAU,8HAqBrB,CAAC;AAIH,eAAO,MAAM,gBAAgB,4GAO3B,CAAC;AAIH,eAAO,MAAM,UAAU,mOAOrB,CAAC;AAIH,eAAO,MAAM,UAAU,mOAoBrB,CAAC;AAIH,eAAO,MAAM,iBAAiB,yGAY5B,CAAC;AAIH,eAAO,MAAM,oBAAoB,yGAY/B,CAAC"}
+{"version":3,"file":"NodeTemplate.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Node/NodeTemplate.styles.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,eAAO,MAAM,YAAY;WAAuB,QAAQ,CAAC,OAAO,CAAC;SAY/D,CAAC;AAIH,eAAO,MAAM,WAAW;UAAyB,QAAQ;SAWvD,CAAC;AAIH,eAAO,MAAM,UAAU;WAAuB,MAAM;SAalD,CAAC;AAIH,eAAO,MAAM,gBAAgB,4GAQ3B,CAAC;AAIH,eAAO,MAAM,UAAU,mOAOrB,CAAC;AAIH,eAAO,MAAM,UAAU,mOAoBrB,CAAC;AAEH,eAAO,MAAM,gBAAgB,yOAO3B,CAAC;AAIH,eAAO,MAAM,iBAAiB,yGAW5B,CAAC;AAIH,eAAO,MAAM,oBAAoB,wGAEhC,CAAC;AAEF,eAAO,MAAM,wBAAwB,yGAMnC,CAAC;AAGH,eAAO,MAAM,sBAAsB,mOAQjC,CAAC"}