@pega/cosmos-react-build 2.0.0-dev.9.2 → 2.0.0-rc.2

package/lib/components/FlowModeller/FlowModeller.js

@@ -0,0 +1,201 @@
+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);
+    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();
+    }, [state.activeAddBtnMeta] // TODO VERIFY whether this parameter helps or not
+    );
+    const onKeydown = useCallback((e) => {
+        if (e.key === 'Escape') {
+            closeMenu();
+        }
+    }, [closeMenu]);
+    useOuterEvent('mousedown', [popoverEl], closeMenu);
+    useEffect(() => {
+        document.addEventListener('keydown', onKeydown);
+        return () => {
+            document.removeEventListener('keydown', onKeydown);
+        };
+    }, []);
+    const items = nodeLibrary !== undefined ? nodeLibrary : [];
+    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
+            }
+        });
+    };
+    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

@@ -0,0 +1 @@
+{"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, NoChildrenProp, 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 extends NoChildrenProp {\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

@@ -0,0 +1,54 @@
+import { Ref, MouseEvent } from 'react';
+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 */
+    label: string;
+    /** Description for Node */
+    description?: string;
+    /** Additional data for Node */
+    additionalData?: AdditionalDataItemProps[];
+    type: NodeType;
+}
+export interface NodeComponentProps extends NodeProps {
+    /** Callback for the node actions click */
+    onActionClick?: (params: ActionParams, e: MouseEvent) => void;
+    /** Callback for the node click */
+    onClick?: (nodeId: NodeProps['id']) => void;
+    /** Actions for the node click */
+    actions?: Action[];
+    /** 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 NodeLibraryItem extends MenuItemProps {
+    id: string;
+    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

@@ -0,0 +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,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

@@ -0,0 +1,28 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,19 @@
+import { NodeType } from './Node.types';
+export declare const StyledCircle: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    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: NodeType;
+}, never>;
+export declare const StyledIcon: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    color: string;
+}, 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<"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

@@ -0,0 +1 @@
+{"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"}

package/lib/components/FlowModeller/Node/NodeTemplate.styles.js

@@ -0,0 +1,128 @@
+import styled, { css } from 'styled-components';
+import { readableColor } from 'polished';
+import { Label, defaultThemeProp, Card, Text, CardFooter } from '@pega/cosmos-react-core';
+export const StyledCircle = styled.div(({ theme, color }) => {
+    return css `
+    height: 2rem;
+    width: 2rem;
+    background: ${color};
+    border-radius: 50%;
+    align-self: center;
+    &:focus {
+      outline: none;
+      box-shadow: ${theme.base.shadow.focus};
+    }
+  `;
+});
+StyledCircle.defaultProps = defaultThemeProp;
+export const StyledLabel = styled(Label)(({ type, theme }) => {
+    return css `
+    align-self: center;
+    ${type.name === 'start'
+        ? css `
+          padding-block-end: ${theme.base.spacing};
+        `
+        : css `
+          padding-block-start: ${theme.base.spacing};
+        `}
+  `;
+});
+StyledLabel.defaultProps = defaultThemeProp;
+export const StyledIcon = styled.div(({ theme, color }) => {
+    const contrastColor = readableColor(color);
+    return css `
+    min-height: 2rem;
+    min-width: 2rem;
+    background: ${color};
+    padding: calc(0.5 * ${theme.base.spacing});
+    margin-inline-end: ${theme.base.spacing};
+    text-align: center;
+    color: ${contrastColor};
+    border-radius: ${theme.base['border-radius']};
+  `;
+});
+StyledIcon.defaultProps = defaultThemeProp;
+export const StyledCardHeader = styled.header(({ theme }) => {
+    return css `
+    white-space: nowrap;
+    button {
+      visibility: hidden;
+      border-radius: ${theme.base['border-radius']};
+    }
+  `;
+});
+StyledCardHeader.defaultProps = defaultThemeProp;
+export const StyledText = styled(Text)(({ theme }) => {
+    return css `
+    padding-inline-end: ${theme.base.spacing};
+    overflow: hidden;
+    min-width: 12rem;
+    text-overflow: ellipsis;
+  `;
+});
+StyledText.defaultProps = defaultThemeProp;
+export const StyledCard = styled(Card)(({ theme }) => {
+    return css `
+    width: 17.5rem;
+    height: 7.5rem;
+    align-self: center;
+    overflow: hidden;
+    &&& {
+      border-radius: ${theme.base['border-radius']};
+    }
+    &:focus-within,
+    &:hover {
+      box-shadow: ${theme.base.shadow.focus};
+      cursor: pointer;
+      ${StyledCardHeader} {
+        button {
+          visibility: visible;
+        }
+      }
+    }
+  `;
+});
+export const StyledCardFooter = styled(CardFooter)(() => {
+    return css `
+    margin-top: auto;
+    &:not(${StyledCard} ${StyledCard} > &) {
+      padding: 0.5rem;
+    }
+  `;
+});
+StyledCard.defaultProps = defaultThemeProp;
+export const StyledCardContent = styled.div(({ theme }) => {
+    return css `
+    padding: ${theme.base.spacing};
+    padding-block-start: 0;
+    max-height: 2.5rem;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  `;
+});
+StyledCardContent.defaultProps = defaultThemeProp;
+export const StyledAdditionalData = styled.dl `
+  overflow: hidden;
+`;
+export const StyledAdditionalDataItem = styled.div(({ theme }) => {
+    return css `
+    padding: 0 calc(0.5 * ${theme.base.spacing});
+    background-color: ${theme.base.palette['secondary-background']};
+    border-radius: ${theme.base['border-radius']};
+  `;
+});
+StyledAdditionalDataItem.defaultProps = defaultThemeProp;
+export const StyledTextWithEllipsis = styled(Text)(() => {
+    return css `
+    overflow: hidden;
+    width: auto;
+    display: inline-block;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  `;
+});
+StyledTextWithEllipsis.defaultProps = defaultThemeProp;
+//# sourceMappingURL=NodeTemplate.styles.js.map

package/lib/components/FlowModeller/Node/NodeTemplate.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NodeTemplate.styles.js","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Node/NodeTemplate.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { readableColor } from 'polished';\n\nimport { Label, defaultThemeProp, Card, Text, CardFooter } from '@pega/cosmos-react-core';\n\nimport { NodeType } from './Node.types';\n\nexport const StyledCircle = styled.div<{ color: NodeType['color'] }>(({ theme, color }) => {\n  return css`\n    height: 2rem;\n    width: 2rem;\n    background: ${color};\n    border-radius: 50%;\n    align-self: center;\n    &:focus {\n      outline: none;\n      box-shadow: ${theme.base.shadow.focus};\n    }\n  `;\n});\n\nStyledCircle.defaultProps = defaultThemeProp;\n\nexport const StyledLabel = styled(Label)<{ type: NodeType }>(({ type, theme }) => {\n  return css`\n    align-self: center;\n    ${type.name === 'start'\n      ? css`\n          padding-block-end: ${theme.base.spacing};\n        `\n      : css`\n          padding-block-start: ${theme.base.spacing};\n        `}\n  `;\n});\n\nStyledLabel.defaultProps = defaultThemeProp;\n\nexport const StyledIcon = styled.div<{ color: string }>(({ theme, color }) => {\n  const contrastColor = readableColor(color);\n\n  return css`\n    min-height: 2rem;\n    min-width: 2rem;\n    background: ${color};\n    padding: calc(0.5 * ${theme.base.spacing});\n    margin-inline-end: ${theme.base.spacing};\n    text-align: center;\n    color: ${contrastColor};\n    border-radius: ${theme.base['border-radius']};\n  `;\n});\n\nStyledIcon.defaultProps = defaultThemeProp;\n\nexport const StyledCardHeader = styled.header(({ theme }) => {\n  return css`\n    white-space: nowrap;\n    button {\n      visibility: hidden;\n      border-radius: ${theme.base['border-radius']};\n    }\n  `;\n});\n\nStyledCardHeader.defaultProps = defaultThemeProp;\n\nexport const StyledText = styled(Text)(({ theme }) => {\n  return css`\n    padding-inline-end: ${theme.base.spacing};\n    overflow: hidden;\n    min-width: 12rem;\n    text-overflow: ellipsis;\n  `;\n});\n\nStyledText.defaultProps = defaultThemeProp;\n\nexport const StyledCard = styled(Card)(({ theme }) => {\n  return css`\n    width: 17.5rem;\n    height: 7.5rem;\n    align-self: center;\n    overflow: hidden;\n    &&& {\n      border-radius: ${theme.base['border-radius']};\n    }\n    &:focus-within,\n    &:hover {\n      box-shadow: ${theme.base.shadow.focus};\n      cursor: pointer;\n      ${StyledCardHeader} {\n        button {\n          visibility: visible;\n        }\n      }\n    }\n  `;\n});\n\nexport const StyledCardFooter = styled(CardFooter)(() => {\n  return css`\n    margin-top: auto;\n    &:not(${StyledCard} ${StyledCard} > &) {\n      padding: 0.5rem;\n    }\n  `;\n});\n\nStyledCard.defaultProps = defaultThemeProp;\n\nexport const StyledCardContent = styled.div(({ theme }) => {\n  return css`\n    padding: ${theme.base.spacing};\n    padding-block-start: 0;\n    max-height: 2.5rem;\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  `;\n});\n\nStyledCardContent.defaultProps = defaultThemeProp;\n\nexport const StyledAdditionalData = styled.dl`\n  overflow: hidden;\n`;\n\nexport const StyledAdditionalDataItem = styled.div(({ theme }) => {\n  return css`\n    padding: 0 calc(0.5 * ${theme.base.spacing});\n    background-color: ${theme.base.palette['secondary-background']};\n    border-radius: ${theme.base['border-radius']};\n  `;\n});\nStyledAdditionalDataItem.defaultProps = defaultThemeProp;\n\nexport const StyledTextWithEllipsis = styled(Text)(() => {\n  return css`\n    overflow: hidden;\n    width: auto;\n    display: inline-block;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n  `;\n});\nStyledTextWithEllipsis.defaultProps = defaultThemeProp;\n"]}

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

@@ -0,0 +1,6 @@
+import { PropsWithoutRef } from 'react';
+import { NodeProps, NodeComponentProps } from './Node.types';
+export declare const DefaultNode: import("react").ForwardRefExoticComponent<Pick<NodeComponentProps, "description" | "data" | "label" | "id" | "type" | "onClick" | "actions" | "additionalData" | "onActionClick"> & import("react").RefAttributes<HTMLElement>>;
+export declare const StartNode: ({ type, label }: PropsWithoutRef<NodeProps>) => JSX.Element;
+export declare const EndNode: ({ type, label }: PropsWithoutRef<NodeProps>) => JSX.Element;
+//# sourceMappingURL=NodeTemplates.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NodeTemplates.d.ts","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Node/NodeTemplates.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAA0D,MAAM,OAAO,CAAC;AA0BhG,OAAO,EAAE,SAAS,EAAE,kBAAkB,EAA2B,MAAM,cAAc,CAAC;AA8DtF,eAAO,MAAM,WAAW,iOA8FvB,CAAC;AAEF,eAAO,MAAM,SAAS,oBAAqB,gBAAgB,SAAS,CAAC,gBASpE,CAAC;AAEF,eAAO,MAAM,OAAO,oBAAqB,gBAAgB,SAAS,CAAC,gBASlE,CAAC"}

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

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, forwardRef } from 'react';
+import { MenuButton, Icon, Flex, Tooltip, useElement, useI18n, cap, Text } from '@pega/cosmos-react-core';
+import { StyledLabel, StyledCircle, StyledIcon, StyledCardHeader, StyledCardContent, StyledCard, StyledText, StyledTextWithEllipsis, StyledAdditionalData, StyledCardFooter, StyledAdditionalDataItem } from './NodeTemplate.styles';
+const MetaListItem = ({ label, value }) => {
+    const [nodeAdditionalDataItem, setNodeAdditionalDataItem] = useElement();
+    return (_jsxs(_Fragment, { children: [_jsxs(Flex, { as: StyledAdditionalDataItem, container: { wrap: 'nowrap', pad: 0.25, gap: 0.25 }, item: { grow: 1 }, ref: setNodeAdditionalDataItem, children: [_jsx(StyledTextWithEllipsis, { as: 'dd', children: label }, void 0), _jsx(Text, { role: 'separator', variant: 'secondary', "aria-hidden": 'true', children: ":\u00A0" }, void 0), _jsx(StyledTextWithEllipsis, { as: 'dt', children: value }, void 0)] }, void 0), _jsx(Tooltip, { target: nodeAdditionalDataItem, hideDelay: 'none', children: `${label}:${value}` }, void 0)] }, void 0));
+};
+const MetaList = ({ metadata }) => {
+    const [nodeAdditionalData, setNodeAdditionalData] = useElement();
+    let additionalDataValue = '';
+    metadata?.forEach((item, index) => {
+        if (index > 1) {
+            additionalDataValue += `${item.label}: ${item.value}
+      `;
+        }
+    });
+    return (_jsxs(Flex, { as: StyledAdditionalData, container: { wrap: 'nowrap', colGap: 1, rowGap: 0.25 }, children: [metadata?.map((data, index) => {
+                if (index >= 2) {
+                    return;
+                }
+                return _jsx(MetaListItem, { ...data }, data.id);
+            }), metadata && metadata.length > 2 && (_jsxs(_Fragment, { children: [_jsx(Flex, { as: StyledAdditionalDataItem, container: { pad: 0.25 }, item: { grow: 1, shrink: 0 }, ref: setNodeAdditionalData, children: _jsx(StyledTextWithEllipsis, { as: 'dt', children: `+${metadata?.length - 2}` }, void 0) }, void 0), additionalDataValue && (_jsx(Tooltip, { target: nodeAdditionalData, hideDelay: 'none', children: additionalDataValue }, void 0))] }, void 0))] }, void 0));
+};
+export const DefaultNode = forwardRef(({ id, label, type, description, additionalData, actions, onActionClick, onClick, ...restProps }, ref) => {
+    const t = useI18n();
+    const actionItems = actions?.map(actionItem => {
+        return {
+            id: actionItem.id,
+            primary: actionItem.text,
+            onClick: (actionId, e) => {
+                e.stopPropagation();
+                onActionClick?.({ actionId, nodeId: id }, e);
+            }
+        };
+    });
+    const handleEnterKeyDown = useCallback((e) => {
+        if (e.key === 'Enter' && !e.shiftKey) {
+            onClick?.(id);
+        }
+    }, [onClick]);
+    const [nodeLabel, setNodeLabel] = useElement();
+    const [nodeDescription, setNodeDescription] = useElement();
+    const [nodeIcon, setNodeIcon] = useElement();
+    return (_jsxs(StyledCard, { "aria-label": label, onClick: () => onClick?.(id), onKeyDown: handleEnterKeyDown, ref: ref, ...restProps, children: [_jsxs(Flex, { as: StyledCardHeader, container: { alignItems: 'center', pad: 1 }, children: [_jsx(StyledIcon, { id: id, color: type.color, ref: setNodeIcon, children: _jsx(Icon, { name: type.icon }, void 0) }, void 0), _jsx(Tooltip, { target: nodeIcon, hideDelay: 'none', children: cap(type.name) }, void 0), _jsx(StyledText, { variant: 'h4', ref: setNodeLabel, children: label }, void 0), _jsx(Tooltip, { describeTarget: false, target: nodeLabel, hideDelay: 'none', children: label }, void 0), actionItems && (_jsx(MenuButton, { portal: true, variant: 'simple', text: t('actions'), icon: 'more', iconOnly: true, onClick: (e) => e.stopPropagation(), onKeyDown: (e) => e.stopPropagation(), menu: {
+                            items: actionItems
+                        } }, void 0))] }, void 0), description && (_jsxs(_Fragment, { children: [_jsx(StyledCardContent, { ref: setNodeDescription, children: description }, void 0), _jsx(Tooltip, { describeTarget: false, target: nodeDescription, hideDelay: 'none', children: description }, void 0)] }, void 0)), additionalData && (_jsx(StyledCardFooter, { children: _jsx(MetaList, { metadata: additionalData }, void 0) }, void 0))] }, void 0));
+});
+export const StartNode = ({ type, label }) => {
+    return (_jsxs(Flex, { container: { justify: 'center', direction: 'column' }, children: [_jsx(Flex, { as: StyledLabel, type: type, children: label }, void 0), _jsx(Flex, { as: StyledCircle, color: type.color, tabIndex: '0', "aria-label": label, role: 'button' }, void 0)] }, void 0));
+};
+export const EndNode = ({ type, label }) => {
+    return (_jsxs(Flex, { container: { justify: 'center', direction: 'column' }, children: [_jsx(Flex, { as: StyledCircle, color: type.color, tabIndex: '0', "aria-label": label, role: 'button' }, void 0), _jsx(Flex, { as: StyledLabel, type: type, children: label }, void 0)] }, void 0));
+};
+//# sourceMappingURL=NodeTemplates.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NodeTemplates.js","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Node/NodeTemplates.tsx"],"names":[],"mappings":"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","sourcesContent":["import { PropsWithoutRef, useCallback, MouseEvent, KeyboardEvent, forwardRef, FC } from 'react';\n\nimport {\n  MenuButton,\n  Icon,\n  Flex,\n  Tooltip,\n  useElement,\n  useI18n,\n  cap,\n  Text\n} from '@pega/cosmos-react-core';\n\nimport {\n  StyledLabel,\n  StyledCircle,\n  StyledIcon,\n  StyledCardHeader,\n  StyledCardContent,\n  StyledCard,\n  StyledText,\n  StyledTextWithEllipsis,\n  StyledAdditionalData,\n  StyledCardFooter,\n  StyledAdditionalDataItem\n} from './NodeTemplate.styles';\nimport { NodeProps, NodeComponentProps, AdditionalDataItemProps } from './Node.types';\n\nconst MetaListItem = ({ label, value }: AdditionalDataItemProps) => {\n  const [nodeAdditionalDataItem, setNodeAdditionalDataItem] = useElement();\n  return (\n    <>\n      <Flex\n        as={StyledAdditionalDataItem}\n        container={{ wrap: 'nowrap', pad: 0.25, gap: 0.25 }}\n        item={{ grow: 1 }}\n        ref={setNodeAdditionalDataItem}\n      >\n        <StyledTextWithEllipsis as='dd'>{label}</StyledTextWithEllipsis>\n        <Text role='separator' variant='secondary' aria-hidden='true'>\n          :&nbsp;\n        </Text>\n        <StyledTextWithEllipsis as='dt'>{value}</StyledTextWithEllipsis>\n      </Flex>\n      <Tooltip target={nodeAdditionalDataItem} hideDelay='none'>\n        {`${label}:${value}`}\n      </Tooltip>\n    </>\n  );\n};\n\nconst MetaList: FC<{ metadata: NodeProps['additionalData'] }> = ({ metadata }) => {\n  const [nodeAdditionalData, setNodeAdditionalData] = useElement();\n  let additionalDataValue = '';\n  metadata?.forEach((item: AdditionalDataItemProps, index: number) => {\n    if (index > 1) {\n      additionalDataValue += `${item.label}: ${item.value}\n      `;\n    }\n  });\n  return (\n    <Flex as={StyledAdditionalData} container={{ wrap: 'nowrap', colGap: 1, rowGap: 0.25 }}>\n      {metadata?.map((data: AdditionalDataItemProps, index: number) => {\n        if (index >= 2) {\n          return;\n        }\n        return <MetaListItem key={data.id} {...data} />;\n      })}\n      {metadata && metadata.length > 2 && (\n        <>\n          <Flex\n            as={StyledAdditionalDataItem}\n            container={{ pad: 0.25 }}\n            item={{ grow: 1, shrink: 0 }}\n            ref={setNodeAdditionalData}\n          >\n            <StyledTextWithEllipsis as='dt'>{`+${metadata?.length - 2}`}</StyledTextWithEllipsis>\n          </Flex>\n          {additionalDataValue && (\n            <Tooltip target={nodeAdditionalData} hideDelay='none'>\n              {additionalDataValue}\n            </Tooltip>\n          )}\n        </>\n      )}\n    </Flex>\n  );\n};\nexport const DefaultNode = forwardRef(\n  (\n    {\n      id,\n      label,\n      type,\n      description,\n      additionalData,\n      actions,\n      onActionClick,\n      onClick,\n      ...restProps\n    }: PropsWithoutRef<NodeComponentProps>,\n    ref: NodeComponentProps['ref']\n  ) => {\n    const t = useI18n();\n    const actionItems = actions?.map(actionItem => {\n      return {\n        id: actionItem.id,\n        primary: actionItem.text,\n        onClick: (actionId: string, e: MouseEvent) => {\n          e.stopPropagation();\n          onActionClick?.({ actionId, nodeId: id }, e);\n        }\n      };\n    });\n\n    const handleEnterKeyDown = useCallback(\n      (e: KeyboardEvent) => {\n        if (e.key === 'Enter' && !e.shiftKey) {\n          onClick?.(id);\n        }\n      },\n      [onClick]\n    );\n\n    const [nodeLabel, setNodeLabel] = useElement();\n    const [nodeDescription, setNodeDescription] = useElement();\n\n    const [nodeIcon, setNodeIcon] = useElement();\n\n    return (\n      <StyledCard\n        aria-label={label}\n        onClick={() => onClick?.(id)}\n        onKeyDown={handleEnterKeyDown}\n        ref={ref}\n        {...restProps}\n      >\n        <Flex as={StyledCardHeader} container={{ alignItems: 'center', pad: 1 }}>\n          <StyledIcon id={id} color={type.color} ref={setNodeIcon}>\n            <Icon name={type.icon} />\n          </StyledIcon>\n          <Tooltip target={nodeIcon} hideDelay='none'>\n            {cap(type.name)}\n          </Tooltip>\n          <StyledText variant='h4' ref={setNodeLabel}>\n            {label}\n          </StyledText>\n          <Tooltip describeTarget={false} target={nodeLabel} hideDelay='none'>\n            {label}\n          </Tooltip>\n\n          {actionItems && (\n            <MenuButton\n              portal\n              variant='simple'\n              text={t('actions')}\n              icon='more'\n              iconOnly\n              onClick={(e: MouseEvent) => e.stopPropagation()}\n              onKeyDown={(e: KeyboardEvent) => e.stopPropagation()}\n              menu={{\n                items: actionItems\n              }}\n            />\n          )}\n        </Flex>\n        {description && (\n          <>\n            <StyledCardContent ref={setNodeDescription}>{description}</StyledCardContent>\n            <Tooltip describeTarget={false} target={nodeDescription} hideDelay='none'>\n              {description}\n            </Tooltip>\n          </>\n        )}\n        {additionalData && (\n          <StyledCardFooter>\n            <MetaList metadata={additionalData} />\n          </StyledCardFooter>\n        )}\n      </StyledCard>\n    );\n  }\n);\n\nexport const StartNode = ({ type, label }: PropsWithoutRef<NodeProps>) => {\n  return (\n    <Flex container={{ justify: 'center', direction: 'column' }}>\n      <Flex as={StyledLabel} type={type}>\n        {label}\n      </Flex>\n      <Flex as={StyledCircle} color={type.color} tabIndex='0' aria-label={label} role='button' />\n    </Flex>\n  );\n};\n\nexport const EndNode = ({ type, label }: PropsWithoutRef<NodeProps>) => {\n  return (\n    <Flex container={{ justify: 'center', direction: 'column' }}>\n      <Flex as={StyledCircle} color={type.color} tabIndex='0' aria-label={label} role='button' />\n      <Flex as={StyledLabel} type={type}>\n        {label}\n      </Flex>\n    </Flex>\n  );\n};\n"]}

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

@@ -0,0 +1,12 @@
+import { FC } from 'react';
+import { ForwardProps } from '@pega/cosmos-react-core';
+import { NodeLibraryItem } from './Node/Node.types';
+export interface NodeLibraryProps {
+    show: boolean;
+    target: HTMLElement | null;
+    items: NodeLibraryItem[];
+    onClick: (libItem: NodeLibraryItem) => void;
+}
+declare const NodeLibrary: FC<NodeLibraryProps & ForwardProps>;
+export default NodeLibrary;
+//# sourceMappingURL=NodeLibrary.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NodeLibrary.d.ts","sourceRoot":"","sources":["../../../src/components/FlowModeller/NodeLibrary.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,EAAE,EASH,MAAM,OAAO,CAAC;AAGf,OAAO,EACL,YAAY,EAUb,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAOpD,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,OAAO,CAAC;IACd,MAAM,EAAE,WAAW,GAAG,IAAI,CAAC;IAC3B,KAAK,EAAE,eAAe,EAAE,CAAC;IACzB,OAAO,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,IAAI,CAAC;CAC7C;AAED,QAAA,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,GAAG,YAAY,CA4EpD,CAAC;AAEF,eAAe,WAAW,CAAC"}