@pega/cosmos-react-demos 3.0.0-dev.4.0 → 3.0.0-dev.5.0

package/jsx/build/FlowModeller/FlowModeller.stories.jsx

@@ -1,9 +1,9 @@
-import { useContext, useState, useEffect } from 'react';
+import { useContext, useState } from 'react';
 import { action } from '@storybook/addon-actions';
-import styled, { css } from 'styled-components';
-import { ModalManagerContext, Modal, Input, Table, Text, Button, Icon, Flex } from '@pega/cosmos-react-core';
+import { ModalManagerContext, Modal, Input } from '@pega/cosmos-react-core';
 import { FlowModeller, DirectedGraph, FlowModellerHelper } from '@pega/cosmos-react-build';
-import { nodeLibrary, nodeActions, exampleCRMNodesData, exampleCRMConnectorsData, emptyNodesData, emptyConnectorsData } from './FlowModeller.mocks';
+import { nodeLibrary, nodeActions, exampleCRMNodesData, exampleCRMConnectorsData, emptyNodesData, emptyConnectorsData, DecisionTable } from './FlowModeller.mocks';
+import { StyledWrapper } from './FlowModeller.styles';
 export default {
     title: 'Build/FlowModeller',
     component: FlowModeller,
@@ -11,80 +11,6 @@ export default {
         layout: 'fullscreen'
     }
 };
-const StyledWrapper = styled.div(() => {
-    return css `
-    height: 100vh;
-    overflow: auto;
-  `;
-});
-const DELETE_ACTION_ID = 'action-1';
-const DecisionTable = ({ updatedData, connectors, onDeleteRow, onAddRow, node, update }) => {
-    const [tableData, setTableData] = useState(connectors);
-    const message = 'Please delete the nodes in the connector manually and delete this connector again';
-    const { create } = useContext(ModalManagerContext);
-    const onAddCondition = () => {
-        const label = 'otherwise';
-        const updatedGraphData = FlowModellerHelper.addBranch(updatedData, node.id, label);
-        const graph = new DirectedGraph(updatedGraphData);
-        const outConnectors = graph.getOutConnectors(node.id);
-        update({
-            node,
-            connectors: outConnectors,
-            updatedData: updatedGraphData
-        });
-        onAddRow(updatedGraphData);
-    };
-    const onDeleteCondition = (connector) => {
-        const updatedGraphData = FlowModellerHelper.deleteConnector(updatedData, connector);
-        if (updatedGraphData) {
-            const updatedGraph = new DirectedGraph(updatedGraphData);
-            const updatedOutConnectors = updatedGraph.getOutConnectors(node.id);
-            update({
-                node,
-                connectors: updatedOutConnectors,
-                updatedData: updatedGraphData
-            });
-            onDeleteRow(updatedGraphData);
-        }
-        else {
-            create(() => {
-                return (<Modal heading='Confirm'>
-              <Text>{message}</Text>
-            </Modal>);
-            }, { center: true });
-        }
-    };
-    const columns = [
-        {
-            renderer: connector => <Input value={connector.label} readOnly/>,
-            label: 'Outcome'
-        },
-        { renderer: () => <Text>No value</Text>, label: 'Decision output' },
-        {
-            renderer: connector => {
-                return (<>
-            <Button variant='simple' label='Delete' disabled={tableData.length < 3} icon onClick={() => {
-                        onDeleteCondition(connector);
-                    }}>
-              <Icon name='trash'/>
-            </Button>
-          </>);
-            },
-            label: 'Action'
-        }
-    ];
-    useEffect(() => {
-        setTableData(connectors);
-    }, [connectors]);
-    return (<>
-      <Table title='Decision outcomes' hoverHighlight data={tableData} columns={columns}/>
-      <Flex container={{ pad: [1, 0] }}>
-        <Button variant='simple' onClick={onAddCondition}>
-          Add Condition
-        </Button>
-      </Flex>
-    </>);
-};
 export const EmptyFlowChartView = () => {
     const [graphData, setGraphData] = useState({
         nodes: emptyNodesData,
@@ -107,16 +33,7 @@ export const EmptyFlowChartView = () => {
       </Modal>);
     };
     const onNodeActionClick = (params) => {
-        if (params.actionId === DELETE_ACTION_ID) {
-            const modifiedGraph = FlowModellerHelper.deleteNode(graphData, params.nodeId);
-            if (modifiedGraph) {
-                setGraphData(modifiedGraph);
-            }
-            else if (!modifiedGraph) {
-                alert('Deletion of this node is not supported ');
-            }
-        }
-        else if (params.actionId === 'action-2') {
+        if (params.actionId === 'action-2') {
             action(`ressigned ${params.nodeId}`)();
         }
         else {
@@ -134,6 +51,9 @@ export const EmptyFlowChartView = () => {
             setGraphData(newGraphData);
         }
     };
+    const deleteNode = (params) => {
+        setGraphData(params.additionalData?.graphData);
+    };
     const selectNode = (nodeId) => {
         const graph = new DirectedGraph(graphData);
         const node = graph.getNode(nodeId);
@@ -145,7 +65,7 @@ export const EmptyFlowChartView = () => {
         });
     };
     return (<StyledWrapper>
-      <FlowModeller graphData={graphData} nodeLibrary={nodeLibrary} onNodeAdd={addNode} onNodeClick={selectNode} actions={nodeActions} onNodeActionClick={onNodeActionClick}/>
+      <FlowModeller graphData={graphData} nodeLibrary={nodeLibrary} onNodeAdd={addNode} onNodeClick={selectNode} actions={nodeActions} onNodeActionClick={onNodeActionClick} onDelete={deleteNode}/>
     </StyledWrapper>);
 };
 export const CRMFlowChartView = () => {
@@ -170,16 +90,7 @@ export const CRMFlowChartView = () => {
       </Modal>);
     };
     const onNodeActionClick = (params) => {
-        if (params.actionId === DELETE_ACTION_ID) {
-            const modifiedGraph = FlowModellerHelper.deleteNode(graphData, params.nodeId);
-            if (modifiedGraph) {
-                setGraphData(modifiedGraph);
-            }
-            else if (!modifiedGraph) {
-                alert('Deletion of this node is not supported ');
-            }
-        }
-        else if (params.actionId === 'action-2') {
+        if (params.actionId === 'action-2') {
             action(`ressigned ${params.nodeId}`)();
         }
         else {
@@ -197,6 +108,9 @@ export const CRMFlowChartView = () => {
             setGraphData(newGraphData);
         }
     };
+    const deleteNode = (params) => {
+        setGraphData(params.additionalData?.graphData);
+    };
     const selectNode = (nodeId) => {
         const graph = new DirectedGraph(graphData);
         const node = graph.getNode(nodeId);
@@ -208,7 +122,7 @@ export const CRMFlowChartView = () => {
         });
     };
     return (<StyledWrapper>
-      <FlowModeller graphData={graphData} nodeLibrary={nodeLibrary} onNodeAdd={addNode} onNodeClick={selectNode} actions={nodeActions} onNodeActionClick={onNodeActionClick}/>
+      <FlowModeller graphData={graphData} nodeLibrary={nodeLibrary} onNodeAdd={addNode} onNodeClick={selectNode} actions={nodeActions} onNodeActionClick={onNodeActionClick} onDelete={deleteNode}/>
     </StyledWrapper>);
 };
 //# sourceMappingURL=FlowModeller.stories.jsx.map

package/jsx/build/FlowModeller/FlowModeller.stories.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"FlowModeller.stories.jsx","sourceRoot":"","sources":["../../../src/build/FlowModeller/FlowModeller.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useContext, useState, useEffect } from 'react';\nimport { action } from '@storybook/addon-actions';\nimport styled, { css } from 'styled-components';\n\nimport {\n  ModalManagerContext,\n  Modal,\n  Input,\n  Table,\n  ColumnProps,\n  Text,\n  Button,\n  Icon,\n  Flex,\n  ModalMethods\n} from '@pega/cosmos-react-core';\nimport {\n  FlowModeller,\n  ActionParams,\n  NodeProps,\n  NodeType,\n  DirectedGraph,\n  GraphData,\n  ConnectorProps,\n  FlowModellerHelper,\n  AddNodeHandlerParams\n} from '@pega/cosmos-react-build';\n\nimport {\n  nodeLibrary,\n  nodeActions,\n  exampleCRMNodesData,\n  exampleCRMConnectorsData,\n  emptyNodesData,\n  emptyConnectorsData\n} from './FlowModeller.mocks';\n\nexport default {\n  title: 'Build/FlowModeller',\n  component: FlowModeller,\n  parameters: {\n    layout: 'fullscreen'\n  }\n};\n\nconst StyledWrapper = styled.div(() => {\n  return css`\n    height: 100vh;\n    overflow: auto;\n  `;\n});\n\ninterface NodeDataType {\n  nodes: NodeProps[];\n  connectors: ConnectorProps[];\n}\n\nconst DELETE_ACTION_ID = 'action-1';\n\ninterface ModalProps {\n  updatedData: NodeDataType;\n  connectors: ConnectorProps[];\n  node: NodeProps;\n}\n\ninterface DecisionTableProps extends ModalProps {\n  onDeleteRow: (data: NodeDataType) => void;\n  onAddRow: (data: NodeDataType) => void;\n  update: ModalMethods['update'];\n}\nconst DecisionTable = ({\n  updatedData,\n  connectors,\n  onDeleteRow,\n  onAddRow,\n  node,\n  update\n}: DecisionTableProps) => {\n  const [tableData, setTableData] = useState<ConnectorProps[]>(connectors);\n  const message =\n    'Please delete the nodes in the connector manually and delete this connector again';\n  const { create } = useContext(ModalManagerContext);\n\n  const onAddCondition = () => {\n    const label = 'otherwise';\n    const updatedGraphData = FlowModellerHelper.addBranch(updatedData, node.id, label);\n    const graph = new DirectedGraph(updatedGraphData);\n    const outConnectors = graph.getOutConnectors(node.id);\n    update({\n      node,\n      connectors: outConnectors,\n      updatedData: updatedGraphData\n    });\n    onAddRow(updatedGraphData);\n  };\n\n  const onDeleteCondition = (connector: ConnectorProps) => {\n    const updatedGraphData = FlowModellerHelper.deleteConnector(updatedData, connector);\n    if (updatedGraphData) {\n      const updatedGraph = new DirectedGraph(updatedGraphData);\n      const updatedOutConnectors = updatedGraph.getOutConnectors(node.id);\n      update({\n        node,\n        connectors: updatedOutConnectors,\n        updatedData: updatedGraphData\n      });\n      onDeleteRow(updatedGraphData);\n    } else {\n      create(\n        () => {\n          return (\n            <Modal heading='Confirm'>\n              <Text>{message}</Text>\n            </Modal>\n          );\n        },\n        { center: true }\n      );\n    }\n  };\n\n  const columns: ColumnProps<ConnectorProps>[] = [\n    {\n      renderer: connector => <Input value={connector.label} readOnly />,\n      label: 'Outcome'\n    },\n    { renderer: () => <Text>No value</Text>, label: 'Decision output' },\n    {\n      renderer: connector => {\n        return (\n          <>\n            <Button\n              variant='simple'\n              label='Delete'\n              disabled={tableData.length < 3}\n              icon\n              onClick={() => {\n                onDeleteCondition(connector);\n              }}\n            >\n              <Icon name='trash' />\n            </Button>\n          </>\n        );\n      },\n      label: 'Action'\n    }\n  ];\n\n  useEffect(() => {\n    setTableData(connectors);\n  }, [connectors]);\n\n  return (\n    <>\n      <Table title='Decision outcomes' hoverHighlight data={tableData} columns={columns} />\n      <Flex container={{ pad: [1, 0] }}>\n        <Button variant='simple' onClick={onAddCondition}>\n          Add Condition\n        </Button>\n      </Flex>\n    </>\n  );\n};\n\nexport const EmptyFlowChartView = () => {\n  const [graphData, setGraphData] = useState<NodeDataType>({\n    nodes: emptyNodesData,\n    connectors: emptyConnectorsData\n  });\n  const { create } = useContext(ModalManagerContext);\n\n  const onTableActionClick = (updatedData: NodeDataType) => {\n    setGraphData(updatedData);\n  };\n  const LaunchPropertyModal = ({ node, connectors, updatedData }: ModalProps) => {\n    const { ModalContext } = useContext(ModalManagerContext);\n    const { update } = useContext(ModalContext);\n    return (\n      <Modal heading={node.label}>\n        <Input label='Description' defaultValue={node.description} />\n        {connectors.length > 1 && (\n          <DecisionTable\n            updatedData={updatedData}\n            connectors={connectors}\n            onDeleteRow={(data: NodeDataType) => {\n              onTableActionClick(data);\n            }}\n            node={node}\n            onAddRow={(data: NodeDataType) => {\n              onTableActionClick(data);\n            }}\n            update={update}\n          />\n        )}\n      </Modal>\n    );\n  };\n\n  const onNodeActionClick = (params: ActionParams) => {\n    if (params.actionId === DELETE_ACTION_ID) {\n      const modifiedGraph = FlowModellerHelper.deleteNode(graphData, params.nodeId);\n\n      if (modifiedGraph) {\n        setGraphData(modifiedGraph);\n      } else if (!modifiedGraph) {\n        // eslint-disable-next-line no-alert\n        alert('Deletion of this node is not supported ');\n      }\n    } else if (params.actionId === 'action-2') {\n      action(`ressigned ${params.nodeId}`)();\n    } else {\n      // eslint-disable-next-line no-console\n      console.warn(`Unknown action ${params.actionId}`);\n    }\n  };\n\n  const addNode = (nodeType: NodeType, metaData: AddNodeHandlerParams) => {\n    const UpdatedData = FlowModellerHelper.addNode({\n      nodeType,\n      graphData,\n      metaData\n    });\n    if (UpdatedData) {\n      const newGraphData: GraphData<NodeProps, ConnectorProps> = UpdatedData;\n      setGraphData(newGraphData);\n    }\n  };\n\n  const selectNode = (nodeId: NodeProps['id']) => {\n    const graph = new DirectedGraph(graphData);\n    const node = graph.getNode(nodeId);\n    const outConnectors = graph.getOutConnectors(nodeId);\n    // LaunchPropertyModal(node, outConnectors, graphData);\n    create(LaunchPropertyModal, {\n      node,\n      connectors: outConnectors,\n      updatedData: graphData\n    });\n  };\n\n  return (\n    <StyledWrapper>\n      <FlowModeller\n        graphData={graphData}\n        nodeLibrary={nodeLibrary}\n        onNodeAdd={addNode}\n        onNodeClick={selectNode}\n        actions={nodeActions}\n        onNodeActionClick={onNodeActionClick}\n      />\n    </StyledWrapper>\n  );\n};\n\nexport const CRMFlowChartView = () => {\n  const [graphData, setGraphData] = useState<GraphData<NodeProps, ConnectorProps>>({\n    nodes: exampleCRMNodesData,\n    connectors: exampleCRMConnectorsData\n  });\n  const { create } = useContext(ModalManagerContext);\n\n  const onTableActionClick = (updatedData: NodeDataType) => {\n    setGraphData(updatedData);\n  };\n\n  const LaunchPropertyModal = ({ node, connectors, updatedData }: ModalProps) => {\n    const { ModalContext } = useContext(ModalManagerContext);\n    const { update } = useContext(ModalContext);\n    return (\n      <Modal heading={node.label}>\n        <Input label='Description' defaultValue={node.description} />\n        {connectors.length > 1 && (\n          <DecisionTable\n            updatedData={updatedData}\n            connectors={connectors}\n            onDeleteRow={(data: NodeDataType) => {\n              onTableActionClick(data);\n            }}\n            node={node}\n            onAddRow={(data: NodeDataType) => {\n              onTableActionClick(data);\n            }}\n            update={update}\n          />\n        )}\n      </Modal>\n    );\n  };\n\n  const onNodeActionClick = (params: ActionParams) => {\n    if (params.actionId === DELETE_ACTION_ID) {\n      const modifiedGraph = FlowModellerHelper.deleteNode(graphData, params.nodeId);\n\n      if (modifiedGraph) {\n        setGraphData(modifiedGraph);\n      } else if (!modifiedGraph) {\n        // eslint-disable-next-line no-alert\n        alert('Deletion of this node is not supported ');\n      }\n    } else if (params.actionId === 'action-2') {\n      action(`ressigned ${params.nodeId}`)();\n    } else {\n      // eslint-disable-next-line no-console\n      console.warn(`Unknown action ${params.actionId}`);\n    }\n  };\n\n  const addNode = (nodeType: NodeType, metaData: AddNodeHandlerParams) => {\n    const UpdatedData = FlowModellerHelper.addNode({\n      nodeType,\n      graphData,\n      metaData\n    });\n    if (UpdatedData) {\n      const newGraphData: GraphData<NodeProps, ConnectorProps> = UpdatedData;\n      setGraphData(newGraphData);\n    }\n  };\n\n  const selectNode = (nodeId: NodeProps['id']) => {\n    const graph = new DirectedGraph(graphData);\n    const node = graph.getNode(nodeId);\n    const outConnectors = graph.getOutConnectors(nodeId);\n    create(LaunchPropertyModal, {\n      node,\n      connectors: outConnectors,\n      updatedData: graphData\n    });\n  };\n\n  return (\n    <StyledWrapper>\n      <FlowModeller\n        graphData={graphData}\n        nodeLibrary={nodeLibrary}\n        onNodeAdd={addNode}\n        onNodeClick={selectNode}\n        actions={nodeActions}\n        onNodeActionClick={onNodeActionClick}\n      />\n    </StyledWrapper>\n  );\n};\n"]}
+{"version":3,"file":"FlowModeller.stories.jsx","sourceRoot":"","sources":["../../../src/build/FlowModeller/FlowModeller.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useContext, useState } from 'react';\nimport { action } from '@storybook/addon-actions';\nimport { Meta } from '@storybook/react';\n\nimport { ModalManagerContext, Modal, Input } from '@pega/cosmos-react-core';\nimport {\n  FlowModeller,\n  ActionParams,\n  NodeProps,\n  NodeType,\n  DirectedGraph,\n  GraphData,\n  ConnectorProps,\n  FlowModellerHelper,\n  AddNodeHandlerParams,\n  DeleteNodeOutcome\n} from '@pega/cosmos-react-build';\n\nimport {\n  ModalProps,\n  nodeLibrary,\n  nodeActions,\n  exampleCRMNodesData,\n  exampleCRMConnectorsData,\n  emptyNodesData,\n  emptyConnectorsData,\n  NodeDataType,\n  DecisionTable\n} from './FlowModeller.mocks';\nimport { StyledWrapper } from './FlowModeller.styles';\n\nexport default {\n  title: 'Build/FlowModeller',\n  component: FlowModeller,\n  parameters: {\n    layout: 'fullscreen'\n  }\n} as Meta;\n\nexport const EmptyFlowChartView = () => {\n  const [graphData, setGraphData] = useState<NodeDataType>({\n    nodes: emptyNodesData,\n    connectors: emptyConnectorsData\n  });\n  const { create } = useContext(ModalManagerContext);\n\n  const onTableActionClick = (updatedData: NodeDataType) => {\n    setGraphData(updatedData);\n  };\n  const LaunchPropertyModal = ({ node, connectors, updatedData }: ModalProps) => {\n    const { ModalContext } = useContext(ModalManagerContext);\n    const { update } = useContext(ModalContext);\n    return (\n      <Modal heading={node.label}>\n        <Input label='Description' defaultValue={node.description} />\n        {connectors.length > 1 && (\n          <DecisionTable\n            updatedData={updatedData}\n            connectors={connectors}\n            onDeleteRow={(data: NodeDataType) => {\n              onTableActionClick(data);\n            }}\n            node={node}\n            onAddRow={(data: NodeDataType) => {\n              onTableActionClick(data);\n            }}\n            update={update}\n          />\n        )}\n      </Modal>\n    );\n  };\n\n  const onNodeActionClick = (params: ActionParams) => {\n    if (params.actionId === 'action-2') {\n      action(`ressigned ${params.nodeId}`)();\n    } else {\n      // eslint-disable-next-line no-console\n      console.warn(`Unknown action ${params.actionId}`);\n    }\n  };\n\n  const addNode = (nodeType: NodeType, metaData: AddNodeHandlerParams) => {\n    const UpdatedData = FlowModellerHelper.addNode({\n      nodeType,\n      graphData,\n      metaData\n    });\n    if (UpdatedData) {\n      const newGraphData: GraphData<NodeProps, ConnectorProps> = UpdatedData;\n      setGraphData(newGraphData);\n    }\n  };\n\n  const deleteNode = (params: ActionParams) => {\n    setGraphData(\n      (params.additionalData as DeleteNodeOutcome)?.graphData as GraphData<\n        NodeProps,\n        ConnectorProps\n      >\n    );\n  };\n\n  const selectNode = (nodeId: NodeProps['id']) => {\n    const graph = new DirectedGraph(graphData);\n    const node = graph.getNode(nodeId);\n    const outConnectors = graph.getOutConnectors(nodeId);\n    // LaunchPropertyModal(node, outConnectors, graphData);\n    create(LaunchPropertyModal, {\n      node,\n      connectors: outConnectors,\n      updatedData: graphData\n    });\n  };\n\n  return (\n    <StyledWrapper>\n      <FlowModeller\n        graphData={graphData}\n        nodeLibrary={nodeLibrary}\n        onNodeAdd={addNode}\n        onNodeClick={selectNode}\n        actions={nodeActions}\n        onNodeActionClick={onNodeActionClick}\n        onDelete={deleteNode}\n      />\n    </StyledWrapper>\n  );\n};\n\nexport const CRMFlowChartView = () => {\n  const [graphData, setGraphData] = useState<GraphData<NodeProps, ConnectorProps>>({\n    nodes: exampleCRMNodesData,\n    connectors: exampleCRMConnectorsData\n  });\n  const { create } = useContext(ModalManagerContext);\n\n  const onTableActionClick = (updatedData: NodeDataType) => {\n    setGraphData(updatedData);\n  };\n\n  const LaunchPropertyModal = ({ node, connectors, updatedData }: ModalProps) => {\n    const { ModalContext } = useContext(ModalManagerContext);\n    const { update } = useContext(ModalContext);\n    return (\n      <Modal heading={node.label}>\n        <Input label='Description' defaultValue={node.description} />\n        {connectors.length > 1 && (\n          <DecisionTable\n            updatedData={updatedData}\n            connectors={connectors}\n            onDeleteRow={(data: NodeDataType) => {\n              onTableActionClick(data);\n            }}\n            node={node}\n            onAddRow={(data: NodeDataType) => {\n              onTableActionClick(data);\n            }}\n            update={update}\n          />\n        )}\n      </Modal>\n    );\n  };\n\n  const onNodeActionClick = (params: ActionParams) => {\n    if (params.actionId === 'action-2') {\n      action(`ressigned ${params.nodeId}`)();\n    } else {\n      // eslint-disable-next-line no-console\n      console.warn(`Unknown action ${params.actionId}`);\n    }\n  };\n\n  const addNode = (nodeType: NodeType, metaData: AddNodeHandlerParams) => {\n    const UpdatedData = FlowModellerHelper.addNode({\n      nodeType,\n      graphData,\n      metaData\n    });\n    if (UpdatedData) {\n      const newGraphData: GraphData<NodeProps, ConnectorProps> = UpdatedData;\n      setGraphData(newGraphData);\n    }\n  };\n\n  const deleteNode = (params: ActionParams) => {\n    setGraphData(\n      (params.additionalData as DeleteNodeOutcome)?.graphData as GraphData<\n        NodeProps,\n        ConnectorProps\n      >\n    );\n  };\n\n  const selectNode = (nodeId: NodeProps['id']) => {\n    const graph = new DirectedGraph(graphData);\n    const node = graph.getNode(nodeId);\n    const outConnectors = graph.getOutConnectors(nodeId);\n    create(LaunchPropertyModal, {\n      node,\n      connectors: outConnectors,\n      updatedData: graphData\n    });\n  };\n\n  return (\n    <StyledWrapper>\n      <FlowModeller\n        graphData={graphData}\n        nodeLibrary={nodeLibrary}\n        onNodeAdd={addNode}\n        onNodeClick={selectNode}\n        actions={nodeActions}\n        onNodeActionClick={onNodeActionClick}\n        onDelete={deleteNode}\n      />\n    </StyledWrapper>\n  );\n};\n"]}

package/jsx/build/FlowModeller/FlowModeller.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const StyledWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+//# sourceMappingURL=FlowModeller.styles.d.ts.map

package/jsx/build/FlowModeller/FlowModeller.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FlowModeller.styles.d.ts","sourceRoot":"","sources":["../../../src/build/FlowModeller/FlowModeller.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,aAAa,yGAKxB,CAAC"}

package/jsx/build/FlowModeller/FlowModeller.styles.js

@@ -0,0 +1,8 @@
+import styled, { css } from 'styled-components';
+export const StyledWrapper = styled.div(() => {
+    return css `
+    height: 100vh;
+    overflow: auto;
+  `;
+});
+//# sourceMappingURL=FlowModeller.styles.js.map

package/jsx/build/FlowModeller/FlowModeller.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FlowModeller.styles.js","sourceRoot":"","sources":["../../../src/build/FlowModeller/FlowModeller.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAC,GAAG,EAAE;IAC3C,OAAO,GAAG,CAAA;;;GAGT,CAAC;AACJ,CAAC,CAAC,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nexport const StyledWrapper = styled.div(() => {\n  return css`\n    height: 100vh;\n    overflow: auto;\n  `;\n});\n"]}

package/jsx/build/ItemLibrary/LibraryPicker.mocks.d.ts

@@ -1,7 +1,3 @@
 import { LibraryItem } from '@pega/cosmos-react-build';
-export interface NodeLibrary extends LibraryItem {
-    name: string;
-    items?: NodeLibrary[];
-}
-export declare const nodeLibrary: NodeLibrary[];
+export declare const nodeLibrary: LibraryItem[];
 //# sourceMappingURL=LibraryPicker.mocks.d.ts.map

package/jsx/build/ItemLibrary/LibraryPicker.mocks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LibraryPicker.mocks.d.ts","sourceRoot":"","sources":["../../../src/build/ItemLibrary/LibraryPicker.mocks.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAEvD,MAAM,WAAW,WAAY,SAAQ,WAAW;IAC9C,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,WAAW,EAAE,CAAC;CACvB;AAED,eAAO,MAAM,WAAW,EAAE,WAAW,EAgDpC,CAAC"}
+{"version":3,"file":"LibraryPicker.mocks.d.ts","sourceRoot":"","sources":["../../../src/build/ItemLibrary/LibraryPicker.mocks.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAEvD,eAAO,MAAM,WAAW,EAAE,WAAW,EA2CpC,CAAC"}

package/jsx/build/ItemLibrary/LibraryPicker.mocks.js

@@ -2,45 +2,40 @@ export const nodeLibrary = [
     {
         id: 'decision',
         primary: 'Decision',
-        name: 'Decision',
         type: {
-            color: '#ffaa75',
+            color: 'darkYellow',
             icon: 'diamond'
         }
     },
     {
         id: 'assignment',
         primary: 'Assignment',
-        name: 'Assignment',
         type: {
-            color: '#20aa50',
+            color: 'japaneseLaurel',
             icon: 'clipboard-data'
         }
     },
     {
         id: 'automation',
         primary: 'Automation',
-        name: 'Automation',
         type: {
-            color: '#7ee791',
+            color: 'studio',
             icon: 'polaris'
         },
         items: [
             {
                 id: 'pdf',
                 primary: 'Generate PDF',
-                name: 'Generate PDF',
                 type: {
-                    color: '#0076d1',
+                    color: 'congressBlue',
                     icon: 'polaris'
                 }
             },
             {
                 id: 'sendemail',
                 primary: 'Send email',
-                name: 'Send email',
                 type: {
-                    color: '#ffaa75',
+                    color: 'yellow',
                     icon: 'mail'
                 }
             }

package/jsx/build/ItemLibrary/LibraryPicker.mocks.js.map

@@ -1 +1 @@
-{"version":3,"file":"LibraryPicker.mocks.js","sourceRoot":"","sources":["../../../src/build/ItemLibrary/LibraryPicker.mocks.ts"],"names":[],"mappings":"AAOA,MAAM,CAAC,MAAM,WAAW,GAAkB;IACxC;QACE,EAAE,EAAE,UAAU;QACd,OAAO,EAAE,UAAU;QACnB,IAAI,EAAE,UAAU;QAChB,IAAI,EAAE;YACJ,KAAK,EAAE,SAAS;YAChB,IAAI,EAAE,SAAS;SAChB;KACF;IACD;QACE,EAAE,EAAE,YAAY;QAChB,OAAO,EAAE,YAAY;QACrB,IAAI,EAAE,YAAY;QAClB,IAAI,EAAE;YACJ,KAAK,EAAE,SAAS;YAChB,IAAI,EAAE,gBAAgB;SACvB;KACF;IACD;QACE,EAAE,EAAE,YAAY;QAChB,OAAO,EAAE,YAAY;QACrB,IAAI,EAAE,YAAY;QAClB,IAAI,EAAE;YACJ,KAAK,EAAE,SAAS;YAChB,IAAI,EAAE,SAAS;SAChB;QACD,KAAK,EAAE;YACL;gBACE,EAAE,EAAE,KAAK;gBACT,OAAO,EAAE,cAAc;gBACvB,IAAI,EAAE,cAAc;gBACpB,IAAI,EAAE;oBACJ,KAAK,EAAE,SAAS;oBAChB,IAAI,EAAE,SAAS;iBAChB;aACF;YACD;gBACE,EAAE,EAAE,WAAW;gBACf,OAAO,EAAE,YAAY;gBACrB,IAAI,EAAE,YAAY;gBAClB,IAAI,EAAE;oBACJ,KAAK,EAAE,SAAS;oBAChB,IAAI,EAAE,MAAM;iBACb;aACF;SACF;KACF;CACF,CAAC","sourcesContent":["import { LibraryItem } from '@pega/cosmos-react-build';\n\nexport interface NodeLibrary extends LibraryItem {\n  name: string;\n  items?: NodeLibrary[];\n}\n\nexport const nodeLibrary: NodeLibrary[] = [\n  {\n    id: 'decision',\n    primary: 'Decision',\n    name: 'Decision',\n    type: {\n      color: '#ffaa75',\n      icon: 'diamond'\n    }\n  },\n  {\n    id: 'assignment',\n    primary: 'Assignment',\n    name: 'Assignment',\n    type: {\n      color: '#20aa50',\n      icon: 'clipboard-data'\n    }\n  },\n  {\n    id: 'automation',\n    primary: 'Automation',\n    name: 'Automation',\n    type: {\n      color: '#7ee791',\n      icon: 'polaris'\n    },\n    items: [\n      {\n        id: 'pdf',\n        primary: 'Generate PDF',\n        name: 'Generate PDF',\n        type: {\n          color: '#0076d1',\n          icon: 'polaris'\n        }\n      },\n      {\n        id: 'sendemail',\n        primary: 'Send email',\n        name: 'Send email',\n        type: {\n          color: '#ffaa75',\n          icon: 'mail'\n        }\n      }\n    ]\n  }\n];\n"]}
+{"version":3,"file":"LibraryPicker.mocks.js","sourceRoot":"","sources":["../../../src/build/ItemLibrary/LibraryPicker.mocks.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,WAAW,GAAkB;IACxC;QACE,EAAE,EAAE,UAAU;QACd,OAAO,EAAE,UAAU;QACnB,IAAI,EAAE;YACJ,KAAK,EAAE,YAAY;YACnB,IAAI,EAAE,SAAS;SAChB;KACF;IACD;QACE,EAAE,EAAE,YAAY;QAChB,OAAO,EAAE,YAAY;QACrB,IAAI,EAAE;YACJ,KAAK,EAAE,gBAAgB;YACvB,IAAI,EAAE,gBAAgB;SACvB;KACF;IACD;QACE,EAAE,EAAE,YAAY;QAChB,OAAO,EAAE,YAAY;QACrB,IAAI,EAAE;YACJ,KAAK,EAAE,QAAQ;YACf,IAAI,EAAE,SAAS;SAChB;QACD,KAAK,EAAE;YACL;gBACE,EAAE,EAAE,KAAK;gBACT,OAAO,EAAE,cAAc;gBACvB,IAAI,EAAE;oBACJ,KAAK,EAAE,cAAc;oBACrB,IAAI,EAAE,SAAS;iBAChB;aACF;YACD;gBACE,EAAE,EAAE,WAAW;gBACf,OAAO,EAAE,YAAY;gBACrB,IAAI,EAAE;oBACJ,KAAK,EAAE,QAAQ;oBACf,IAAI,EAAE,MAAM;iBACb;aACF;SACF;KACF;CACF,CAAC","sourcesContent":["import { LibraryItem } from '@pega/cosmos-react-build';\n\nexport const nodeLibrary: LibraryItem[] = [\n  {\n    id: 'decision',\n    primary: 'Decision',\n    type: {\n      color: 'darkYellow',\n      icon: 'diamond'\n    }\n  },\n  {\n    id: 'assignment',\n    primary: 'Assignment',\n    type: {\n      color: 'japaneseLaurel',\n      icon: 'clipboard-data'\n    }\n  },\n  {\n    id: 'automation',\n    primary: 'Automation',\n    type: {\n      color: 'studio',\n      icon: 'polaris'\n    },\n    items: [\n      {\n        id: 'pdf',\n        primary: 'Generate PDF',\n        type: {\n          color: 'congressBlue',\n          icon: 'polaris'\n        }\n      },\n      {\n        id: 'sendemail',\n        primary: 'Send email',\n        type: {\n          color: 'yellow',\n          icon: 'mail'\n        }\n      }\n    ]\n  }\n];\n"]}

package/jsx/build/ItemLibrary/LibraryPicker.stories.d.ts

@@ -1,9 +1,6 @@
 /// <reference types="react" />
-import { LibraryItem } from '@pega/cosmos-react-build';
-declare const _default: {
-    title: string;
-    component: import("react").FC<import("@pega/cosmos-react-build").ItemLibraryProps<LibraryItem> & import("@pega/cosmos-react-core").ForwardProps>;
-};
+import { Meta } from '@storybook/react';
+declare const _default: Meta<import("@storybook/addons").Args>;
 export default _default;
 export declare const ColorPicker: () => JSX.Element;
 //# sourceMappingURL=LibraryPicker.stories.d.ts.map

package/jsx/build/ItemLibrary/LibraryPicker.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LibraryPicker.stories.d.ts","sourceRoot":"","sources":["../../../src/build/ItemLibrary/LibraryPicker.stories.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAe,WAAW,EAAE,MAAM,0BAA0B,CAAC;;;;;AAKpE,wBAGE;AAEF,eAAO,MAAM,WAAW,mBAiDvB,CAAC"}
+{"version":3,"file":"LibraryPicker.stories.d.ts","sourceRoot":"","sources":["../../../src/build/ItemLibrary/LibraryPicker.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;;AAOxC,wBAGU;AAEV,eAAO,MAAM,WAAW,mBAiDvB,CAAC"}

package/jsx/build/ItemLibrary/LibraryPicker.stories.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"LibraryPicker.stories.jsx","sourceRoot":"","sources":["../../../src/build/ItemLibrary/LibraryPicker.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAE3C,OAAO,EAAE,WAAW,EAAe,MAAM,0BAA0B,CAAC;AACpE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAE5E,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAEpD,eAAe;IACb,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,WAAW;CACvB,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,EAAE;IAC9B,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,EAAe,CAAC;IAChE,MAAM,CAAC,UAAU,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACnD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,UAAU,EAAe,CAAC;IAC5D,MAAM,SAAS,GAAG,MAAM,CAA2B,IAAI,CAAC,CAAC;IAEzD,MAAM,SAAS,GAAG,GAAG,EAAE;QACrB,YAAY,CAAC,KAAK,CAAC,CAAC;IACtB,CAAC,CAAC;IAEF,MAAM,QAAQ,GAAG,GAAG,EAAE;QACpB,YAAY,CAAC,IAAI,CAAC,CAAC;IACrB,CAAC,CAAC;IAEF,MAAM,QAAQ,GAAG,CAAC,IAAiB,EAAE,EAAE;QACrC,eAAe,CAAC,IAAI,CAAC,CAAC;QACtB,SAAS,EAAE,CAAC;IACd,CAAC,CAAC;IAEF,MAAM,SAAS,GAAG,CAAC,CAAgB,EAAE,EAAE;QACrC,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,EAAE;YACtB,SAAS,EAAE,CAAC;SACb;IACH,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;QAChD,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;QACrD,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,aAAa,CAAC,WAAW,EAAE,CAAC,SAAS,CAAC,EAAE,SAAS,CAAC,CAAC;IAEnD,OAAO,CACL,EACE;MAAA,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,UAAU,CAAC,YAAY,CAAC,OAAO,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,CAChE;MAAA,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,CAAC,SAAS,CAAC,CACxC;;MACF,EAAE,MAAM,CACR;MAAA,CAAC,WAAW,CACV,KAAK,CAAC,CAAC,WAAW,CAAC,CACnB,IAAI,CAAC,CAAC,UAAU,CAAC,CACjB,MAAM,CAAC,CAAC,SAAS,IAAK,SAAS,CAAC,OAAuB,CAAC,CACxD,GAAG,CAAC,CAAC,YAAY,CAAC,CAClB,OAAO,CAAC,CAAC,QAAQ,CAAC,EAEtB;IAAA,GAAG,CACJ,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { useEffect, useState } from 'react';\nimport { useRef } from '@storybook/addons';\n\nimport { ItemLibrary, LibraryItem } from '@pega/cosmos-react-build';\nimport { Button, useElement, useOuterEvent } from '@pega/cosmos-react-core';\n\nimport { nodeLibrary } from './LibraryPicker.mocks';\n\nexport default {\n  title: 'Build/LibraryPicker',\n  component: ItemLibrary\n};\n\nexport const ColorPicker = () => {\n  const [selectedItem, setSelectedItem] = useState<LibraryItem>();\n  const [showPicker, updatePicker] = useState(false);\n  const [popoverEl, setPopoverEl] = useElement<HTMLElement>();\n  const targetRef = useRef<HTMLButtonElement | null>(null);\n\n  const closeMenu = () => {\n    updatePicker(false);\n  };\n\n  const btnClick = () => {\n    updatePicker(true);\n  };\n\n  const onSelect = (item: LibraryItem) => {\n    setSelectedItem(item);\n    closeMenu();\n  };\n\n  const onKeydown = (e: KeyboardEvent) => {\n    if (e.key === 'Escape') {\n      closeMenu();\n    }\n  };\n\n  useEffect(() => {\n    document.addEventListener('keydown', onKeydown);\n    return () => {\n      document.removeEventListener('keydown', onKeydown);\n    };\n  }, []);\n\n  useOuterEvent('mousedown', [popoverEl], closeMenu);\n\n  return (\n    <>\n      {selectedItem ? <div>Selected: {selectedItem.primary}</div> : ''}\n      <Button onClick={btnClick} ref={targetRef}>\n        Select from library\n      </Button>\n      <ItemLibrary\n        items={nodeLibrary}\n        show={showPicker}\n        target={targetRef && (targetRef.current as HTMLElement)}\n        ref={setPopoverEl}\n        onClick={onSelect}\n      />\n    </>\n  );\n};\n"]}
+{"version":3,"file":"LibraryPicker.stories.jsx","sourceRoot":"","sources":["../../../src/build/ItemLibrary/LibraryPicker.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAG3C,OAAO,EAAE,WAAW,EAAe,MAAM,0BAA0B,CAAC;AACpE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAE5E,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAEpD,eAAe;IACb,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,WAAW;CACf,CAAC;AAEV,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,EAAE;IAC9B,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,EAAe,CAAC;IAChE,MAAM,CAAC,UAAU,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACnD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,UAAU,EAAe,CAAC;IAC5D,MAAM,SAAS,GAAG,MAAM,CAA2B,IAAI,CAAC,CAAC;IAEzD,MAAM,SAAS,GAAG,GAAG,EAAE;QACrB,YAAY,CAAC,KAAK,CAAC,CAAC;IACtB,CAAC,CAAC;IAEF,MAAM,QAAQ,GAAG,GAAG,EAAE;QACpB,YAAY,CAAC,IAAI,CAAC,CAAC;IACrB,CAAC,CAAC;IAEF,MAAM,QAAQ,GAAG,CAAC,IAAiB,EAAE,EAAE;QACrC,eAAe,CAAC,IAAI,CAAC,CAAC;QACtB,SAAS,EAAE,CAAC;IACd,CAAC,CAAC;IAEF,MAAM,SAAS,GAAG,CAAC,CAAgB,EAAE,EAAE;QACrC,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,EAAE;YACtB,SAAS,EAAE,CAAC;SACb;IACH,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;QAChD,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;QACrD,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,aAAa,CAAC,WAAW,EAAE,CAAC,SAAS,CAAC,EAAE,SAAS,CAAC,CAAC;IAEnD,OAAO,CACL,EACE;MAAA,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,UAAU,CAAC,YAAY,CAAC,OAAO,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,CAChE;MAAA,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,CAAC,SAAS,CAAC,CACxC;;MACF,EAAE,MAAM,CACR;MAAA,CAAC,WAAW,CACV,KAAK,CAAC,CAAC,WAAW,CAAC,CACnB,IAAI,CAAC,CAAC,UAAU,CAAC,CACjB,MAAM,CAAC,CAAC,SAAS,IAAK,SAAS,CAAC,OAAuB,CAAC,CACxD,GAAG,CAAC,CAAC,YAAY,CAAC,CAClB,OAAO,CAAC,CAAC,QAAQ,CAAC,EAEtB;IAAA,GAAG,CACJ,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { useEffect, useState } from 'react';\nimport { useRef } from '@storybook/addons';\nimport { Meta } from '@storybook/react';\n\nimport { ItemLibrary, LibraryItem } from '@pega/cosmos-react-build';\nimport { Button, useElement, useOuterEvent } from '@pega/cosmos-react-core';\n\nimport { nodeLibrary } from './LibraryPicker.mocks';\n\nexport default {\n  title: 'Build/LibraryPicker',\n  component: ItemLibrary\n} as Meta;\n\nexport const ColorPicker = () => {\n  const [selectedItem, setSelectedItem] = useState<LibraryItem>();\n  const [showPicker, updatePicker] = useState(false);\n  const [popoverEl, setPopoverEl] = useElement<HTMLElement>();\n  const targetRef = useRef<HTMLButtonElement | null>(null);\n\n  const closeMenu = () => {\n    updatePicker(false);\n  };\n\n  const btnClick = () => {\n    updatePicker(true);\n  };\n\n  const onSelect = (item: LibraryItem) => {\n    setSelectedItem(item);\n    closeMenu();\n  };\n\n  const onKeydown = (e: KeyboardEvent) => {\n    if (e.key === 'Escape') {\n      closeMenu();\n    }\n  };\n\n  useEffect(() => {\n    document.addEventListener('keydown', onKeydown);\n    return () => {\n      document.removeEventListener('keydown', onKeydown);\n    };\n  }, []);\n\n  useOuterEvent('mousedown', [popoverEl], closeMenu);\n\n  return (\n    <>\n      {selectedItem ? <div>Selected: {selectedItem.primary}</div> : ''}\n      <Button onClick={btnClick} ref={targetRef}>\n        Select from library\n      </Button>\n      <ItemLibrary\n        items={nodeLibrary}\n        show={showPicker}\n        target={targetRef && (targetRef.current as HTMLElement)}\n        ref={setPopoverEl}\n        onClick={onSelect}\n      />\n    </>\n  );\n};\n"]}

package/jsx/build/LifeCycle/LifeCycle.mocks.d.ts

@@ -1,3 +1,4 @@
+import { LibraryItem } from '@pega/cosmos-react-build';
 export declare const LifeCycleEmptyData: {
     id: string;
     categories: never[];
@@ -198,4 +199,6 @@ export declare const LifeCycleWorkFlowData: {
         }[];
     }[];
 };
+export declare const workFlowNodeLibrary: LibraryItem[];
+export declare const planViewNodeLibrary: LibraryItem[];
 //# sourceMappingURL=LifeCycle.mocks.d.ts.map

package/jsx/build/LifeCycle/LifeCycle.mocks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LifeCycle.mocks.d.ts","sourceRoot":"","sources":["../../../src/build/LifeCycle/LifeCycle.mocks.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+C9B,CAAC;AAEF,eAAO,MAAM,0BAA0B;;;;;;;;;;;;;;;;;;CAiCtC,CAAC;AAEF,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAihBjC,CAAC;AAEF,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAogBjC,CAAC"}
+{"version":3,"file":"LifeCycle.mocks.d.ts","sourceRoot":"","sources":["../../../src/build/LifeCycle/LifeCycle.mocks.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAEvD,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+C9B,CAAC;AAEF,eAAO,MAAM,0BAA0B;;;;;;;;;;;;;;;;;;CAiCtC,CAAC;AAEF,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAihBjC,CAAC;AAEF,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAogBjC,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,WAAW,EA2C5C,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,WAAW,EA4C5C,CAAC"}

package/jsx/build/LifeCycle/LifeCycle.mocks.js

@@ -27,7 +27,7 @@ export const LifeCycleEmptyData = {
                                         visual: {
                                             imgurl: '',
                                             icon: 'clipboard-data',
-                                            color: 'Japaneselaurel',
+                                            color: 'japaneseLaurel',
                                             label: 'pega data'
                                         },
                                         status: {
@@ -218,7 +218,7 @@ export const LifeCyclePlanViewData = {
                                     visual: {
                                         imgurl: '',
                                         icon: 'mail',
-                                        color: 'darkyellow',
+                                        color: 'darkYellow',
                                         label: 'email'
                                     },
                                     status: {
@@ -258,7 +258,7 @@ export const LifeCyclePlanViewData = {
                                     visual: {
                                         imgurl: '',
                                         icon: 'mobile-phone',
-                                        color: 'Japaneselaurel',
+                                        color: 'japaneseLaurel',
                                         label: 'phone'
                                     },
                                     status: {
@@ -337,7 +337,7 @@ export const LifeCyclePlanViewData = {
                                     visual: {
                                         imgurl: '',
                                         icon: 'mobile-phone',
-                                        color: 'Japaneselaurel',
+                                        color: 'japaneseLaurel',
                                         label: 'web server'
                                     },
                                     status: {
@@ -637,7 +637,7 @@ export const LifeCycleWorkFlowData = {
                                         visual: {
                                             imgurl: '',
                                             icon: 'clipboard-data',
-                                            color: 'Japaneselaurel',
+                                            color: 'japaneseLaurel',
                                             label: 'details'
                                         },
                                         error: '',
@@ -652,7 +652,7 @@ export const LifeCycleWorkFlowData = {
                                         visual: {
                                             imgurl: '',
                                             icon: 'clipboard-data',
-                                            color: 'Japaneselaurel',
+                                            color: 'japaneseLaurel',
                                             label: 'history'
                                         },
                                         error: '',
@@ -667,7 +667,7 @@ export const LifeCycleWorkFlowData = {
                                         visual: {
                                             imgurl: '',
                                             icon: 'clipboard-data',
-                                            color: 'Japaneselaurel',
+                                            color: 'japaneseLaurel',
                                             label: 'technical'
                                         },
                                         error: '',
@@ -682,7 +682,7 @@ export const LifeCycleWorkFlowData = {
                                         visual: {
                                             imgurl: '',
                                             icon: 'clipboard-data',
-                                            color: 'Japaneselaurel',
+                                            color: 'japaneseLaurel',
                                             label: 'location'
                                         },
                                         error: '',
@@ -697,7 +697,7 @@ export const LifeCycleWorkFlowData = {
                                         visual: {
                                             imgurl: '',
                                             icon: 'clipboard-data',
-                                            color: 'Japaneselaurel',
+                                            color: 'japaneseLaurel',
                                             label: 'date'
                                         },
                                         error: '',
@@ -722,7 +722,7 @@ export const LifeCycleWorkFlowData = {
                                         visual: {
                                             imgurl: '',
                                             icon: 'clipboard-data',
-                                            color: 'Japaneselaurel',
+                                            color: 'japaneseLaurel',
                                             label: 'register'
                                         },
                                         error: '',
@@ -752,7 +752,7 @@ export const LifeCycleWorkFlowData = {
                                         visual: {
                                             imgurl: '',
                                             icon: 'clipboard-check',
-                                            color: 'Japaneselaurel',
+                                            color: 'japaneseLaurel',
                                             label: 'apply'
                                         },
                                         error: '',
@@ -880,7 +880,7 @@ export const LifeCycleWorkFlowData = {
                                         visual: {
                                             imgurl: '',
                                             icon: 'mail',
-                                            color: 'darkyellow',
+                                            color: 'darkYellow',
                                             label: 'Channel'
                                         },
                                         error: '',
@@ -922,7 +922,7 @@ export const LifeCycleWorkFlowData = {
                                         visual: {
                                             imgurl: '',
                                             icon: 'mail',
-                                            color: 'darkyellow',
+                                            color: 'darkYellow',
                                             label: 'Channel'
                                         },
                                         error: '',
@@ -978,7 +978,7 @@ export const LifeCycleWorkFlowData = {
                                         visual: {
                                             imgurl: '',
                                             icon: 'stoplight',
-                                            color: 'Japaneselaurel',
+                                            color: 'japaneseLaurel',
                                             label: 'technical'
                                         },
                                         error: '',
@@ -993,7 +993,7 @@ export const LifeCycleWorkFlowData = {
                                         visual: {
                                             imgurl: '',
                                             icon: 'stoplight',
-                                            color: 'Japaneselaurel',
+                                            color: 'japaneseLaurel',
                                             label: 'technical'
                                         },
                                         error: '',
@@ -1008,7 +1008,7 @@ export const LifeCycleWorkFlowData = {
                                         visual: {
                                             imgurl: '',
                                             icon: 'stoplight',
-                                            color: 'Japaneselaurel',
+                                            color: 'japaneseLaurel',
                                             label: 'technical'
                                         },
                                         error: '',
@@ -1023,7 +1023,7 @@ export const LifeCycleWorkFlowData = {
                                         visual: {
                                             imgurl: '',
                                             icon: 'mail',
-                                            color: 'darkyellow',
+                                            color: 'darkYellow',
                                             label: 'email'
                                         },
                                         error: '',
@@ -1079,7 +1079,7 @@ export const LifeCycleWorkFlowData = {
                                         visual: {
                                             imgurl: '',
                                             icon: 'mail',
-                                            color: 'darkyellow',
+                                            color: 'darkYellow',
                                             label: 'details'
                                         },
                                         error: '',
@@ -1125,4 +1125,92 @@ export const LifeCycleWorkFlowData = {
         }
     ]
 };
+export const workFlowNodeLibrary = [
+    {
+        id: 'decision',
+        primary: 'Decision',
+        type: {
+            color: 'darkYellow',
+            icon: 'diamond'
+        }
+    },
+    {
+        id: 'assignment',
+        primary: 'Assignment',
+        type: {
+            color: 'japaneseLaurel',
+            icon: 'clipboard-data'
+        }
+    },
+    {
+        id: 'automation',
+        primary: 'Automation',
+        type: {
+            color: 'studio',
+            icon: 'polaris'
+        },
+        items: [
+            {
+                id: 'pdf',
+                primary: 'Generate PDF',
+                type: {
+                    color: 'congressBlue',
+                    icon: 'polaris'
+                }
+            },
+            {
+                id: 'sendemail',
+                primary: 'Send email',
+                type: {
+                    color: 'yellow',
+                    icon: 'mail'
+                }
+            }
+        ]
+    }
+];
+export const planViewNodeLibrary = [
+    {
+        id: 'Manager portal',
+        primary: 'Manager portal',
+        type: {
+            color: 'orange',
+            icon: 'desktop'
+        }
+    },
+    {
+        id: 'Mobile Application',
+        primary: 'Mobile Application',
+        type: {
+            color: 'japaneseLaurel',
+            icon: 'mobile-phone'
+        }
+    },
+    {
+        id: 'User portal',
+        primary: 'Automations',
+        type: {
+            color: 'magenta',
+            icon: 'laptop'
+        },
+        items: [
+            {
+                id: 'Send email',
+                primary: 'Send email',
+                type: {
+                    color: 'darkYellow',
+                    icon: 'mail'
+                }
+            },
+            {
+                id: 'Web services',
+                primary: 'Web services',
+                type: {
+                    color: 'congressBlue',
+                    icon: 'server'
+                }
+            }
+        ]
+    }
+];
 //# sourceMappingURL=LifeCycle.mocks.js.map