npm - @pega/cosmos-react-build - Versions diffs - 2.0.0-rc.3 → 2.1.0 - Mend

@pega/cosmos-react-build 2.0.0-rc.3 → 2.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (112) hide show

package/lib/components/FlowModeller/{Renderer/AddNode.d.ts → AddNode.d.ts} RENAMED Viewed

@@ -1,10 +1,16 @@
 import { FC, MouseEvent } from 'react';
+import { RendererNodeProps } from './Renderer/Renderer.types';
 export declare const StyledDot: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").IconProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledPlus: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").IconProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledButton: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").ButtonProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
 interface AddBtnProps {
     addNodeHandler: (e: MouseEvent<HTMLButtonElement>) => void;
 }
+export interface AddNodeProps extends RendererNodeProps {
+    onClick?: (ev: Event) => void;
+}
+export declare const StyledConnectorLabel: 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 AddButton: FC<AddBtnProps>;
 export {};
 //# sourceMappingURL=AddNode.d.ts.map

package/lib/components/FlowModeller/AddNode.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"AddNode.d.ts","sourceRoot":"","sources":["../../../src/components/FlowModeller/AddNode.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAYvC,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAE9D,eAAO,MAAM,SAAS,mOAKpB,CAAC;AAIH,eAAO,MAAM,UAAU,mOAAiB,CAAC;AACzC,eAAO,MAAM,aAAa,yGAUxB,CAAC;AAIH,eAAO,MAAM,YAAY,qOAsBvB,CAAC;AAIH,UAAU,WAAW;IACnB,cAAc,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CAC5D;AAED,MAAM,WAAW,YAAa,SAAQ,iBAAiB;IACrD,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,KAAK,KAAK,IAAI,CAAC;CAC/B;AAED,eAAO,MAAM,oBAAoB,mOAQ/B,CAAC;AAIH,eAAO,MAAM,SAAS,EAAE,EAAE,CAAC,WAAW,CAWrC,CAAC"}

package/lib/components/FlowModeller/AddNode.js ADDED Viewed

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled, { css } from 'styled-components';
+import { Button, defaultThemeProp, Flex, Icon, useI18n, StyledTooltip, Text } from '@pega/cosmos-react-core';
+export const StyledDot = styled(Icon)(({ theme }) => {
+    return css `
+    position: absolute;
+    color: ${theme.base.colors.slate.dark};
+  `;
+});
+StyledDot.defaultProps = defaultThemeProp;
+export const StyledPlus = styled(Icon) ``;
+export const StyledWrapper = styled.div(({ theme }) => {
+    return css `
+    margin-block-start: ${theme.base.spacing};
+    ${StyledTooltip} {
+      ${css `
+        min-width: 12ch;
+        text-align: center;
+      `}
+    }
+  `;
+});
+StyledWrapper.defaultProps = defaultThemeProp;
+export const StyledButton = styled(Button)(({ theme }) => {
+    return css `
+    top: -0.25rem;
+    border: 0;
+    background: transparent;
+    color: ${theme.base.colors.black};
+    ${StyledPlus} {
+      opacity: 0;
+    }
+    &:hover,
+    &:active,
+    &:focus {
+      opacity: 1;
+      background: ${theme.base.colors.white};
+      ${StyledDot} {
+        opacity: 0;
+      }
+      ${StyledPlus} {
+        opacity: 1;
+      }
+    }
+  `;
+});
+StyledButton.defaultProps = defaultThemeProp;
+export const StyledConnectorLabel = styled(Text)(({ theme }) => {
+    return css `
+    border-radius: ${theme.base['border-radius']};
+    background: ${theme.base.colors.slate.dark};
+    color: ${theme.base.colors.white};
+    text-align: center;
+    padding: calc(0.5 * ${theme.base.spacing});
+  `;
+});
+StyledConnectorLabel.defaultProps = defaultThemeProp;
+export const AddButton = ({ addNodeHandler }) => {
+    const t = useI18n();
+    return (_jsx(Flex, { container: { justify: 'center' }, as: StyledWrapper, children: _jsxs(StyledButton, { label: t('add_node'), icon: true, onClick: addNodeHandler, children: [_jsx(StyledDot, { name: 'circle-solid' }, void 0), _jsx(StyledPlus, { name: 'plus' }, void 0)] }, void 0) }, void 0));
+};
+//# sourceMappingURL=AddNode.js.map

package/lib/components/FlowModeller/AddNode.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"AddNode.js","sourceRoot":"","sources":["../../../src/components/FlowModeller/AddNode.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAGhD,OAAO,EACL,MAAM,EACN,gBAAgB,EAChB,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,aAAa,EACb,IAAI,EACL,MAAM,yBAAyB,CAAC;AAIjC,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAClD,OAAO,GAAG,CAAA;;aAEC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI;GACtC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,SAAS,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE1C,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA,EAAE,CAAC;AACzC,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACpD,OAAO,GAAG,CAAA;0BACc,KAAK,CAAC,IAAI,CAAC,OAAO;MACtC,aAAa;QACX,GAAG,CAAA;;;OAGJ;;GAEJ,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,aAAa,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE9C,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACvD,OAAO,GAAG,CAAA;;;;aAIC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;MAC9B,UAAU;;;;;;;oBAOI,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;QACnC,SAAS;;;QAGT,UAAU;;;;GAIf,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,YAAY,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAU7C,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC7D,OAAO,GAAG,CAAA;qBACS,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;kBAC9B,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI;aACjC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;;0BAEV,KAAK,CAAC,IAAI,CAAC,OAAO;GACzC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD,MAAM,CAAC,MAAM,SAAS,GAAoB,CAAC,EAAE,cAAc,EAAE,EAAE,EAAE;IAC/D,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,OAAO,CACL,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAE,aAAa,YACvD,MAAC,YAAY,IAAC,KAAK,EAAE,CAAC,CAAC,UAAU,CAAC,EAAE,IAAI,QAAC,OAAO,EAAE,cAAc,aAC9D,KAAC,SAAS,IAAC,IAAI,EAAC,cAAc,WAAG,EACjC,KAAC,UAAU,IAAC,IAAI,EAAC,MAAM,WAAG,YACb,WACV,CACR,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\nimport { FC, MouseEvent } from 'react';\n\nimport {\n Button,\n defaultThemeProp,\n Flex,\n Icon,\n useI18n,\n StyledTooltip,\n Text\n} from '@pega/cosmos-react-core';\n\nimport { RendererNodeProps } from './Renderer/Renderer.types';\n\nexport const StyledDot = styled(Icon)(({ theme }) => {\n return css`\n position: absolute;\n color: ${theme.base.colors.slate.dark};\n `;\n});\n\nStyledDot.defaultProps = defaultThemeProp;\n\nexport const StyledPlus = styled(Icon)``;\nexport const StyledWrapper = styled.div(({ theme }) => {\n return css`\n margin-block-start: ${theme.base.spacing};\n ${StyledTooltip} {\n ${css`\n min-width: 12ch;\n text-align: center;\n `}\n }\n `;\n});\n\nStyledWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledButton = styled(Button)(({ theme }) => {\n return css`\n top: -0.25rem;\n border: 0;\n background: transparent;\n color: ${theme.base.colors.black};\n ${StyledPlus} {\n opacity: 0;\n }\n &:hover,\n &:active,\n &:focus {\n opacity: 1;\n background: ${theme.base.colors.white};\n ${StyledDot} {\n opacity: 0;\n }\n ${StyledPlus} {\n opacity: 1;\n }\n }\n `;\n});\n\nStyledButton.defaultProps = defaultThemeProp;\n\ninterface AddBtnProps {\n addNodeHandler: (e: MouseEvent<HTMLButtonElement>) => void;\n}\n\nexport interface AddNodeProps extends RendererNodeProps {\n onClick?: (ev: Event) => void;\n}\n\nexport const StyledConnectorLabel = styled(Text)(({ theme }) => {\n return css`\n border-radius: ${theme.base['border-radius']};\n background: ${theme.base.colors.slate.dark};\n color: ${theme.base.colors.white};\n text-align: center;\n padding: calc(0.5 * ${theme.base.spacing});\n `;\n});\n\nStyledConnectorLabel.defaultProps = defaultThemeProp;\n\nexport const AddButton: FC<AddBtnProps> = ({ addNodeHandler }) => {\n const t = useI18n();\n\n return (\n <Flex container={{ justify: 'center' }} as={StyledWrapper}>\n <StyledButton label={t('add_node')} icon onClick={addNodeHandler}>\n <StyledDot name='circle-solid' />\n <StyledPlus name='plus' />\n </StyledButton>\n </Flex>\n );\n};\n"]}

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

@@ -1,9 +1,9 @@
 import { PropsWithoutRef, MouseEvent } from 'react';
-import { Action, NoChildrenProp } from '@pega/cosmos-react-core';
+import { Action } from '@pega/cosmos-react-core';
 import { GraphData, ConnectorProps } from './Renderer/Utils/Graph';
 import { AddNodeHandlerParams } from './Renderer/Renderer.types';
 import { ActionParams, NodeProps, NodeLibraryItem, NodeType } from './Node/Node.types';
-export interface FlowModellerProps extends NoChildrenProp {
+export interface FlowModellerProps {
     graphData: GraphData<NodeProps, ConnectorProps>;
     /** Node actions */
     actions?: Action[];

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

	@@ -1 +1 @@
1	- {"version":3,"file":"FlowModeller.d.ts","sourceRoot":"","sources":["../../../src/components/FlowModeller/FlowModeller.tsx"],"names":[],"mappings":"AAAA,OAAO,~~EAAE~~,eAAe,~~EAAa~~,UAAU,~~EAAoC~~,MAAM,OAAO,CAAC;~~AAEjG~~,OAAO,~~EAAE~~,MAAM,~~EAAE~~,~~cAAc,EAA6B,~~MAAM,yBAAyB,CAAC;~~AAE5F~~,OAAO,~~EAAiB~~,SAAS,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;~~AAElF~~,OAAO,EACL,oBAAoB,EAGrB,MAAM,2BAA2B,CAAC;AAGnC,OAAO,EACL,YAAY,EACZ,SAAS,EACT,eAAe,EAGf,QAAQ,EACT,MAAM,mBAAmB,CAAC;~~AAG3B~~,MAAM,WAAW,~~iBAAkB,SAAQ,cAAc~~;~~IACvD~~,SAAS,EAAE,SAAS,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC;IAChD,mBAAmB;IACnB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,0CAA0C;IAC1C,SAAS,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,oBAAoB,KAAK,IAAI,CAAC;IACtE,kDAAkD;IAClD,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,mCAAmC;IACnC,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,EAAE,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACjE,qBAAqB;IACrB,WAAW,EAAE,eAAe,EAAE,CAAC;CAChC;~~AA0ID~~,QAAA,MAAM,YAAY,mFAOf,gBAAgB,iBAAiB,CAAC,~~gBAgJpC~~,CAAC;AAEF,eAAe,YAAY,CAAC"}
1	+ {"version":3,"file":"FlowModeller.d.ts","sourceRoot":"","sources":["../../../src/components/FlowModeller/FlowModeller.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,eAAe,EAEf,UAAU,EAMX,MAAM,OAAO,CAAC;AAGf,OAAO,EACL,MAAM,EAOP,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACnE,OAAO,EACL,oBAAoB,EAGrB,MAAM,2BAA2B,CAAC;AAGnC,OAAO,EACL,YAAY,EACZ,SAAS,EACT,eAAe,EAGf,QAAQ,EACT,MAAM,mBAAmB,CAAC;AAQ3B,MAAM,WAAW,iBAAiB;IAChC,SAAS,EAAE,SAAS,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC;IAChD,mBAAmB;IACnB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,0CAA0C;IAC1C,SAAS,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,oBAAoB,KAAK,IAAI,CAAC;IACtE,kDAAkD;IAClD,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,mCAAmC;IACnC,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,EAAE,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACjE,qBAAqB;IACrB,WAAW,EAAE,eAAe,EAAE,CAAC;CAChC;AAsED,QAAA,MAAM,YAAY,mFAOf,gBAAgB,iBAAiB,CAAC,gBAuMpC,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/components/FlowModeller/FlowModeller.js CHANGED Viewed

@@ -1,12 +1,13 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, 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 styled, { css } from 'styled-components';
+import { createUID, useElement, useOuterEvent, Flex, Text, defaultThemeProp } from '@pega/cosmos-react-core';
 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';
+import PlaceHolderHelper, { isPlaceHolderConnector } from './Utils/AddNodeUtils';
+import { AddButton } from './AddNode';
 const initState = {
     showLib: false,
     activeAddBtnMeta: {
@@ -16,7 +17,9 @@ const initState = {
             refId: ''
         }
     },
-    graphData: { nodes: [], connectors: [] }
+    graphData: { nodes: [], connectors: [] },
+    connectorComponent: () => _jsx(_Fragment, {}, void 0),
+    nodeComponent: () => _jsx(_Fragment, {}, void 0)
 };
 const reducer = (state, action) => {
     switch (action.type) {
@@ -30,87 +33,101 @@ const reducer = (state, action) => {
                 ...action.payload
             };
             return {
-                ...state
+                ...state,
+                showLib: true
             };
         case 'setGraphData':
             return {
                 ...state,
-                graphData: action.payload
+                graphData: action.payload.graphData,
+                connectorComponent: action.payload.connectorComponent,
+                nodeComponent: action.payload.nodeComponent
             };
         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}`,
+const StyledLabel = styled(Text)(({ theme }) => {
+    return css `
+    border-radius: ${theme.base['border-radius']};
+    background: ${theme.base.colors.slate.dark};
+    color: ${theme.base.colors.white};
+    text-align: center;
+    padding: calc(0.5 * ${theme.base.spacing});
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 32ch;
+    white-space: nowrap;
+  `;
+});
+StyledLabel.defaultProps = defaultThemeProp;
+const FlowModeller = ({ graphData, onNodeActionClick, onNodeClick, onNodeAdd, nodeLibrary, actions }) => {
+    const [state, dispatch] = useReducer(reducer, initState);
+    const [popoverEl, setPopoverEl] = useElement(null);
+    const onNodeCreate = (el, meta) => {
+        dispatch({
+            type: 'setActiveAddButton',
+            payload: {
+                target: el,
+                meta
+            }
+        });
+    };
+    const closeMenu = () => {
+        dispatch({
+            type: 'showLibrary',
+            payload: {
+                show: false
+            }
+        });
+    };
+    useEffect(() => {
+        const onGetNewPHNode = metaData => {
+            return {
+                id: createUID(),
                 children: (_jsx(AddButton, { addNodeHandler: (e) => {
-                        onAddNode(e.target, metaData);
+                        onNodeCreate(e.currentTarget, metaData);
                     } }, void 0)),
                 position: { x: 0, y: 0 },
-                dimensions: { width: 20, height: 16 }
+                dimensions: { width: 1, height: 0 }
             };
-            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,
+        };
+        const onGetNewPHConnector = (fromNodeId, toNodeId) => {
+            return {
+                id: createUID(),
+                fromNodeId,
+                toNodeId,
                 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 }
+        const Connector = props => {
+            const { id, labelLayout } = props;
+            const refId = isPlaceHolderConnector(props)
+                ? props.realConnectors
+                : id.toString();
+            const metaData = {
+                refType: 'connector',
+                refId
+            };
+            return (_jsxs(_Fragment, { children: [labelLayout?.value && (_jsx(Flex, { container: { justify: 'center' }, children: _jsx(StyledLabel, { children: labelLayout.value }, void 0) }, void 0)), _jsx(AddButton, { addNodeHandler: (e) => {
+                            onNodeCreate(e.currentTarget, metaData);
+                        } }, void 0)] }, void 0));
         };
-        targetGraph.addNode(addShapeNode);
-        const newConnector = {
-            id: `con-${con.id}`,
-            fromNodeId: addShapeNode.id,
-            toNodeId: con.toNodeId,
-            points: []
+        const Node = ({ id, type, label, description, additionalData }) => {
+            if (!type) {
+                return _jsx("div", {}, void 0);
+            }
+            if (type?.id === START_NODETYPE.id) {
+                return _jsx(StartNode, { id: id, type: type, label: label.toUpperCase() }, void 0);
+            }
+            if (type?.id === STOP_NODETYPE.id) {
+                return _jsx(EndNode, { id: id, type: type, label: label.toUpperCase() }, void 0);
+            }
+            return (_jsx(DefaultNode, { id: id, label: label, type: type, description: description, onActionClick: onNodeActionClick, onClick: onNodeClick, actions: actions, additionalData: additionalData }, void 0));
         };
-        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
@@ -120,18 +137,9 @@ const FlowModeller = ({ graphData, onNodeActionClick, onNodeClick, onNodeAdd, no
                     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));
+            if (node.type.id === START_NODETYPE.id || node.type.id === STOP_NODETYPE.id) {
+                flowNode.dimensions.width = 58;
+                flowNode.dimensions.height = 58;
             }
             return flowNode;
         });
@@ -144,27 +152,25 @@ const FlowModeller = ({ graphData, onNodeActionClick, onNodeClick, onNodeAdd, no
                 }
             };
         });
+        // inject the placeholderAddNodes dynamically
+        const newGraphData = PlaceHolderHelper.injectPlaceholderNodes({ nodes: flowNodes, connectors }, onGetNewPHNode, onGetNewPHConnector);
         dispatch({
             type: 'setGraphData',
-            payload: { nodes: flowNodes, connectors }
+            payload: {
+                graphData: newGraphData,
+                connectorComponent: Connector,
+                nodeComponent: Node
+            }
         });
     }, [graphData]);
     /**
      * Library popover functionality
      */
-    const closeMenu = () => {
-        dispatch({
-            type: 'showLibrary',
-            payload: {
-                show: false
-            }
-        });
-    };
     const onLibraryItemSelect = useCallback((libItem) => {
-        onNodeAdd(libItem.type, state.activeAddBtnMeta.meta);
+        const metaData = state.activeAddBtnMeta.meta;
         closeMenu();
-    }, [state.activeAddBtnMeta] // TODO VERIFY whether this parameter helps or not
-    );
+        onNodeAdd(libItem.type, metaData);
+    }, [state.activeAddBtnMeta]);
     const onKeydown = useCallback((e) => {
         if (e.key === 'Escape') {
             closeMenu();
@@ -178,24 +184,7 @@ const FlowModeller = ({ graphData, onNodeActionClick, onNodeClick, onNodeAdd, no
         };
     }, []);
     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));
+    return (_jsxs("div", { children: [_jsx(FlowRenderer, { graphData: state.graphData, connector: state.connectorComponent, node: state.nodeComponent }, 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 CHANGED Viewed

	@@ -1 +1 @@
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"]}
1	+ {"version":3,"file":"FlowModeller.js","sourceRoot":"","sources":["../../../src/components/FlowModeller/FlowModeller.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n PropsWithoutRef,\n useEffect,\n MouseEvent,\n useReducer,\n FC,\n Reducer,\n useCallback,\n ComponentType\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n Action,\n createUID,\n useElement,\n useOuterEvent,\n Flex,\n Text,\n defaultThemeProp\n} from '@pega/cosmos-react-core';\n\nimport { GraphData, ConnectorProps } from './Renderer/Utils/Graph';\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';\nimport PlaceHolderHelper, {\n isPlaceHolderConnector,\n PlaceHolderConnector\n} from './Utils/AddNodeUtils';\nimport { AddButton } from './AddNode';\n\nexport interface FlowModellerProps {\n graphData: GraphData<NodeProps, ConnectorProps>;\n /** Node actions /\n actions?: Action[];\n /* Callback to add node from connector /\n onNodeAdd: (nodeType: NodeType, params: AddNodeHandlerParams) => void;\n /* Callback for handling the click on the node /\n onNodeClick?: (nodeId: string) => void;\n /* Callback for actions on Node /\n onNodeActionClick?: (param: ActionParams, e: MouseEvent) => void;\n /* Types of nodes /\n nodeLibrary: NodeLibraryItem[];\n}\n\ntype ModellerState = {\n showLib: boolean;\n activeAddBtnMeta: {\n target: null; // we will maintain ref of an Element\n meta: AddNodeHandlerParams;\n };\n graphData: GraphData<RendererNodeProps, RendererConnectorProps>;\n connectorComponent: ComponentType<RendererConnectorProps>;\n nodeComponent: ComponentType<RendererNodeProps>;\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 connectorComponent: () => <></>,\n nodeComponent: () => <></>\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 showLib: true\n };\n case 'setGraphData':\n return {\n ...state,\n graphData: action.payload.graphData,\n connectorComponent: action.payload.connectorComponent,\n nodeComponent: action.payload.nodeComponent\n };\n default:\n return state;\n }\n};\n\nconst StyledLabel = styled(Text)(({ theme }) => {\n return css`\n border-radius: ${theme.base['border-radius']};\n background: ${theme.base.colors.slate.dark};\n color: ${theme.base.colors.white};\n text-align: center;\n padding: calc(0.5 ${theme.base.spacing});\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 32ch;\n white-space: nowrap;\n `;\n});\n\nStyledLabel.defaultProps = defaultThemeProp;\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 const [popoverEl, setPopoverEl] = useElement<HTMLElement>(null);\n\n const onNodeCreate = (el: HTMLElement \| SVGForeignObjectElement, meta: AddNodeHandlerParams) => {\n dispatch({\n type: 'setActiveAddButton',\n payload: {\n target: el,\n meta\n }\n });\n };\n\n const closeMenu = () => {\n dispatch({\n type: 'showLibrary',\n payload: {\n show: false\n }\n });\n };\n\n useEffect(() => {\n const onGetNewPHNode: (metaData: AddNodeHandlerParams) => RendererNodeProps = metaData => {\n return {\n id: createUID(),\n children: (\n <AddButton\n addNodeHandler={(e: MouseEvent<HTMLButtonElement>) => {\n onNodeCreate(e.currentTarget as HTMLElement, metaData);\n }}\n />\n ),\n position: { x: 0, y: 0 },\n dimensions: { width: 1, height: 0 }\n };\n };\n\n const onGetNewPHConnector: (\n fromNodeId: string,\n toNodeId: string,\n metaData: AddNodeHandlerParams\n ) => RendererConnectorProps = (fromNodeId, toNodeId) => {\n return {\n id: createUID(),\n fromNodeId,\n toNodeId,\n points: []\n };\n };\n\n const Connector: FC<RendererConnectorProps> = props => {\n const { id, labelLayout } = props;\n\n const refId = isPlaceHolderConnector(props)\n ? (props as PlaceHolderConnector).realConnectors\n : id.toString();\n\n const metaData: AddNodeHandlerParams = {\n refType: 'connector',\n refId\n };\n\n return (\n <>\n {labelLayout?.value && (\n <Flex container={{ justify: 'center' }}>\n <StyledLabel>{labelLayout.value}</StyledLabel>\n </Flex>\n )}\n <AddButton\n addNodeHandler={(e: MouseEvent<HTMLButtonElement>) => {\n onNodeCreate(e.currentTarget, metaData);\n }}\n />\n </>\n );\n };\n const Node: FC<NodeProps> = ({ id, type, label, description, additionalData }) => {\n if (!type) {\n return <div />;\n }\n if (type?.id === START_NODETYPE.id) {\n return <StartNode id={id} type={type} label={label.toUpperCase()} />;\n }\n if (type?.id === STOP_NODETYPE.id) {\n return <EndNode id={id} type={type} label={label.toUpperCase()} />;\n }\n return (\n <DefaultNode\n id={id}\n label={label}\n type={type}\n description={description}\n onActionClick={onNodeActionClick}\n onClick={onNodeClick}\n actions={actions}\n additionalData={additionalData}\n />\n );\n };\n\n const flowNodes: RendererNodeProps[] = graphData.nodes.map(node => {\n const flowNode: RendererNodeProps = {\n ...node,\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 \|\| node.type.id === STOP_NODETYPE.id) {\n flowNode.dimensions.width = 58;\n flowNode.dimensions.height = 58;\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 // inject the placeholderAddNodes dynamically\n const newGraphData: GraphData<RendererNodeProps, RendererConnectorProps> =\n PlaceHolderHelper.injectPlaceholderNodes(\n { nodes: flowNodes, connectors },\n onGetNewPHNode,\n onGetNewPHConnector\n );\n\n dispatch({\n type: 'setGraphData',\n payload: {\n graphData: newGraphData,\n connectorComponent: Connector,\n nodeComponent: Node\n }\n });\n }, [graphData]);\n\n /*\n Library popover functionality\n */\n const onLibraryItemSelect = useCallback(\n (libItem: NodeLibraryItem) => {\n const metaData = state.activeAddBtnMeta.meta;\n closeMenu();\n onNodeAdd(libItem.type, metaData);\n },\n [state.activeAddBtnMeta]\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 return (\n <div>\n <FlowRenderer\n graphData={state.graphData}\n connector={state.connectorComponent}\n node={state.nodeComponent}\n />\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/NodeTemplate.styles.d.ts CHANGED Viewed

@@ -1,13 +1,9 @@
 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;
+export declare const StyledCircle: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledLabel: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").TextProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {
+    nodeType: NodeType;
 }, never>;
+export declare const StyledIcon: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, 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>;

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

	@@ -1 +1 @@
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"}
1	+ {"version":3,"file":"NodeTemplate.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Node/NodeTemplate.styles.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAExC,eAAO,MAAM,YAAY,yGAYvB,CAAC;AAIH,eAAO,MAAM,WAAW;cAA4B,QAAQ;SAW1D,CAAC;AAIH,eAAO,MAAM,UAAU,yGAWrB,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,yGAa5B,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 CHANGED Viewed

@@ -1,11 +1,10 @@
 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 }) => {
+import { defaultThemeProp, Card, Text, CardFooter } from '@pega/cosmos-react-core';
+export const StyledCircle = styled.div(({ theme }) => {
     return css `
     height: 2rem;
     width: 2rem;
-    background: ${color};
+    background: var(--bg-color);
     border-radius: 50%;
     align-self: center;
     &:focus {
@@ -15,10 +14,10 @@ export const StyledCircle = styled.div(({ theme, color }) => {
   `;
 });
 StyledCircle.defaultProps = defaultThemeProp;
-export const StyledLabel = styled(Label)(({ type, theme }) => {
+export const StyledLabel = styled(Text)(({ nodeType, theme }) => {
     return css `
     align-self: center;
-    ${type.name === 'start'
+    ${nodeType.name === 'start'
         ? css `
           padding-block-end: ${theme.base.spacing};
         `
@@ -28,16 +27,15 @@ export const StyledLabel = styled(Label)(({ type, theme }) => {
   `;
 });
 StyledLabel.defaultProps = defaultThemeProp;
-export const StyledIcon = styled.div(({ theme, color }) => {
-    const contrastColor = readableColor(color);
+export const StyledIcon = styled.div(({ theme }) => {
     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};
+    background-color: var(--bg-color);
+    color: var(--fg-color);
     border-radius: ${theme.base['border-radius']};
   `;
 });
@@ -101,6 +99,8 @@ export const StyledCardContent = styled.div(({ theme }) => {
     -webkit-box-orient: vertical;
     overflow: hidden;
     text-overflow: ellipsis;
+    white-space: pre-wrap;
+    word-wrap: break-word;
   `;
 });
 StyledCardContent.defaultProps = defaultThemeProp;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"NodeTemplate.styles.js","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Node/NodeTemplate.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;~~AAChD~~,OAAO,EAAE,~~aAAa,EAAE,MAAM,UAAU,CAAC;AAEzC,OAAO,EAAE,KAAK,EAAE,~~gBAAgB,EAAE,IAAI,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;~~AAI1F~~,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,~~CAA+B~~,CAAC,EAAE,KAAK,EAAE,~~KAAK,~~EAAE,EAAE~~,EAAE~~;~~IACxF~~,OAAO,GAAG,CAAA~~;;;kBAGM~~,KAAK~~;;;;;oBAKH~~,~~KAAK,~~CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;;GAExC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,YAAY,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE7C,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,~~KAAK~~,CAAC,~~CAAqB~~,CAAC,EAAE,~~IAAI~~,EAAE,KAAK,EAAE,EAAE,EAAE;~~IAC/E~~,OAAO,GAAG,CAAA;;MAEN,~~IAAI~~,CAAC,IAAI,KAAK,OAAO;~~QACrB~~,CAAC,CAAC,GAAG,CAAA;+BACoB,KAAK,CAAC,IAAI,CAAC,OAAO;SACxC;QACH,CAAC,CAAC,GAAG,CAAA;iCACsB,KAAK,CAAC,IAAI,CAAC,OAAO;SAC1C;GACN,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,WAAW,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE5C,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,~~CAAoB~~,CAAC,EAAE,KAAK,EAAE,~~KAAK,~~EAAE,EAAE~~,EAAE~~;~~IAC3E~~,~~MAAM,aAAa,GAAG,aAAa,CAAC,KAAK,CAAC,CAAC;IAE3C,~~OAAO,GAAG,CAAA;;;~~kBAGM~~,KAAK~~;0BACG~~,~~KAAK,~~CAAC,IAAI,CAAC,OAAO;yBACnB,KAAK,CAAC,IAAI,CAAC,OAAO~~;;aAE9B~~,~~aAAa;qBACL,~~KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;GAC7C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,UAAU,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3C,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC1D,OAAO,GAAG,CAAA;;;;uBAIW,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;;GAE/C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACnD,OAAO,GAAG,CAAA;0BACc,KAAK,CAAC,IAAI,CAAC,OAAO;;;;GAIzC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,UAAU,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3C,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACnD,OAAO,GAAG,CAAA;;;;;;uBAMW,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;;;;oBAI9B,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;;QAEnC,gBAAgB;;;;;;GAMrB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC,GAAG,EAAE;IACtD,OAAO,GAAG,CAAA;;YAEA,UAAU,IAAI,UAAU;;;GAGjC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,UAAU,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3C,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACxD,OAAO,GAAG,CAAA;eACG,KAAK,CAAC,IAAI,CAAC,OAAO~~;;;;;;;;GAQ9B~~,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,EAAE,CAAA;;CAE5C,CAAC;AAEF,MAAM,CAAC,MAAM,wBAAwB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC/D,OAAO,GAAG,CAAA;4BACgB,KAAK,CAAC,IAAI,CAAC,OAAO;wBACtB,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,sBAAsB,CAAC;qBAC7C,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;GAC7C,CAAC;AACJ,CAAC,CAAC,CAAC;AACH,wBAAwB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEzD,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,GAAG,EAAE;IACtD,OAAO,GAAG,CAAA;;;;;;GAMT,CAAC;AACJ,CAAC,CAAC,CAAC;AACH,sBAAsB,CAAC,YAAY,GAAG,gBAAgB,CAAC","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"]}
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';\n\nimport { defaultThemeProp, Card, Text, CardFooter } from '@pega/cosmos-react-core';\n\nimport { NodeType } from './Node.types';\n\nexport const StyledCircle = styled.div(({ theme }) => {\n return css`\n height: 2rem;\n width: 2rem;\n background: var(--bg-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(Text)<{ nodeType: NodeType }>(({ nodeType, theme }) => {\n return css`\n align-self: center;\n ${nodeType.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(({ theme }) => {\n return css`\n min-height: 2rem;\n min-width: 2rem;\n padding: calc(0.5 * ${theme.base.spacing});\n margin-inline-end: ${theme.base.spacing};\n text-align: center;\n background-color: var(--bg-color);\n color: var(--fg-color);\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 white-space: pre-wrap;\n word-wrap: break-word;\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.map CHANGED Viewed

	@@ -1 +1 @@
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"}
1	+ {"version":3,"file":"NodeTemplates.d.ts","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Node/NodeTemplates.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,eAAe,EAOhB,MAAM,OAAO,CAAC;AA2Bf,OAAO,EAAE,SAAS,EAAE,kBAAkB,EAA2B,MAAM,cAAc,CAAC;AA8DtF,eAAO,MAAM,WAAW,iOAuGvB,CAAC;AAEF,eAAO,MAAM,SAAS,oBAAqB,gBAAgB,SAAS,CAAC,gBAmBpE,CAAC;AAEF,eAAO,MAAM,OAAO,oBAAqB,gBAAgB,SAAS,CAAC,gBAmBlE,CAAC"}