npm - @pega/cosmos-react-build - Versions diffs - 2.0.0-dev.17.0 → 2.0.0-dev.21.0 - Mend

@pega/cosmos-react-build 2.0.0-dev.17.0 → 2.0.0-dev.21.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 (133) hide show

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

@@ -1,12 +1,11 @@
 import styled, { css } from 'styled-components';
 import { readableColor } from 'polished';
-import { Label, defaultThemeProp, Card, Text } from '@pega/cosmos-react-core';
-export const StyledCircle = styled.div(({ theme, type }) => {
-    const bgColor = type === 'start' ? theme.base.colors.green.medium : theme.base.colors.red.light;
+import { Label, defaultThemeProp, Card, Text, CardFooter } from '@pega/cosmos-react-core';
+export const StyledCircle = styled.div(({ theme, color }) => {
     return css `
     height: 2rem;
     width: 2rem;
-    background: ${bgColor};
+    background: ${color};
     border-radius: 50%;
     align-self: center;
     &:focus {
@@ -19,7 +18,7 @@ StyledCircle.defaultProps = defaultThemeProp;
 export const StyledLabel = styled(Label)(({ type, theme }) => {
     return css `
     align-self: center;
-    ${type === 'start'
+    ${type.name === 'start'
         ? css `
           padding-block-end: ${theme.base.spacing};
         `
@@ -29,32 +28,26 @@ export const StyledLabel = styled(Label)(({ type, theme }) => {
   `;
 });
 StyledLabel.defaultProps = defaultThemeProp;
-export const StyledIcon = styled.div(({ theme, type }) => {
-    const visualBg = {
-        assignment: theme.base.colors.green.medium,
-        decision: theme.base.colors.purple.medium,
-        question: theme.base.colors.green.dark,
-        message: theme.base.colors.orange.medium,
-        automation: theme.base.colors.blue.light
-    };
-    const contrastColor = readableColor(visualBg[type]);
+export const StyledIcon = styled.div(({ theme, color }) => {
+    const contrastColor = readableColor(color);
     return css `
     min-height: 2rem;
     min-width: 2rem;
-    background: ${visualBg[type]};
+    background: ${color};
     padding: calc(0.5 * ${theme.base.spacing});
     margin-inline-end: ${theme.base.spacing};
     text-align: center;
     color: ${contrastColor};
-    border-radius: calc(0.25 * ${theme.base['border-radius']});
+    border-radius: ${theme.base['border-radius']};
   `;
 });
 StyledIcon.defaultProps = defaultThemeProp;
-export const StyledCardHeader = styled.header(() => {
+export const StyledCardHeader = styled.header(({ theme }) => {
     return css `
     white-space: nowrap;
     button {
       visibility: hidden;
+      border-radius: ${theme.base['border-radius']};
     }
   `;
 });
@@ -63,19 +56,19 @@ export const StyledText = styled(Text)(({ theme }) => {
     return css `
     padding-inline-end: ${theme.base.spacing};
     overflow: hidden;
-    max-width: 12rem;
+    min-width: 12rem;
     text-overflow: ellipsis;
   `;
 });
 StyledText.defaultProps = defaultThemeProp;
 export const StyledCard = styled(Card)(({ theme }) => {
     return css `
-    min-width: 17.5rem;
-    min-height: 7rem;
+    width: 17.5rem;
+    height: 7.5rem;
     align-self: center;
     overflow: hidden;
     &&& {
-      border-radius: calc(0.5 * ${theme.base['border-radius']});
+      border-radius: ${theme.base['border-radius']};
     }
     &:focus-within,
     &:hover {
@@ -89,12 +82,19 @@ export const StyledCard = styled(Card)(({ theme }) => {
     }
   `;
 });
+export const StyledCardFooter = styled(CardFooter)(() => {
+    return css `
+    margin-top: auto;
+    &:not(${StyledCard} ${StyledCard} > &) {
+      padding: 0.5rem;
+    }
+  `;
+});
 StyledCard.defaultProps = defaultThemeProp;
 export const StyledCardContent = styled.div(({ theme }) => {
     return css `
     padding: ${theme.base.spacing};
     padding-block-start: 0;
-    max-width: 17.5rem;
     max-height: 2.5rem;
     display: -webkit-box;
     -webkit-line-clamp: 2;
@@ -104,18 +104,25 @@ export const StyledCardContent = styled.div(({ theme }) => {
   `;
 });
 StyledCardContent.defaultProps = defaultThemeProp;
-export const StyledAdditionalData = styled.div(({ theme }) => {
+export const StyledAdditionalData = styled.dl `
+  overflow: hidden;
+`;
+export const StyledAdditionalDataItem = styled.div(({ theme }) => {
+    return css `
+    padding: 0 calc(0.5 * ${theme.base.spacing});
+    background-color: ${theme.base.palette['secondary-background']};
+    border-radius: ${theme.base['border-radius']};
+  `;
+});
+StyledAdditionalDataItem.defaultProps = defaultThemeProp;
+export const StyledTextWithEllipsis = styled(Text)(() => {
     return css `
-    padding: ${theme.base.spacing};
-    padding-block-start: 0;
-    max-width: 17.5rem;
-    max-height: 1rem;
-    display: -webkit-box;
-    -webkit-line-clamp: 1;
-    -webkit-box-orient: vertical;
     overflow: hidden;
+    width: auto;
+    display: inline-block;
+    white-space: nowrap;
     text-overflow: ellipsis;
   `;
 });
-StyledAdditionalData.defaultProps = defaultThemeProp;
+StyledTextWithEllipsis.defaultProps = defaultThemeProp;
 //# sourceMappingURL=NodeTemplate.styles.js.map

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,MAAM,yBAAyB,CAAC;~~AAI9E~~,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,~~CAAmB~~,CAAC,EAAE,KAAK,EAAE,~~IAAI~~,EAAE,EAAE,EAAE;~~IAC3E~~,~~MAAM,~~OAAO,GAAG,~~IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC;IAChG,OAAO,GAAG,~~CAAA;;;kBAGM,~~OAAO~~;;;;;~~oBAKL~~,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,~~CAAmB~~,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE;~~IAC7E~~,OAAO,GAAG,CAAA;;MAEN,IAAI,KAAK,OAAO;~~QAChB~~,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,~~CAA0B~~,CAAC,EAAE,KAAK,EAAE,~~IAAI,EAAE,EAAE,EAAE;IAChF,MAAM,QAAQ,GAA8B;QAC1C,UAAU,EAAE,~~KAAK,~~CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM;QAC1C,QAAQ,~~EAAE,~~KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM;QACzC,QAAQ,~~EAAE,~~KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI;QACtC,OAAO,~~EAAE~~,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM~~;~~QACxC~~,~~UAAU,EAAE,KAAK,CAAC,IAAI,CAAC,~~MAAM,~~CAAC,IAAI,CAAC,KAAK;KACzC,CAAC;IAEF,MAAM,~~aAAa,GAAG,aAAa,CAAC,~~QAAQ~~,CAAC,~~IAAI,~~CAAC~~,CAAC,CAAC~~;~~IAEpD~~,OAAO,GAAG,CAAA;;;kBAGM,~~QAAQ,CAAC,IAAI,CAAC~~;~~0BACN~~,KAAK,CAAC,IAAI,CAAC,OAAO;yBACnB,KAAK,CAAC,IAAI,CAAC,OAAO;;aAE9B,aAAa;~~iCACO~~,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;~~GACzD~~,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,UAAU,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3C,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,CAAC,~~GAAG~~,EAAE;~~IACjD~~,OAAO,GAAG,CAAA~~;;;;;GAKT~~,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;;;;;;~~kCAMsB~~,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;;;;~~oBAIzC~~,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;;QAEnC,gBAAgB;;;;;;GAMrB,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~~;;;;;;;;;GAS9B~~,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;~~IAC3D~~,OAAO,GAAG,CAAA;~~eACG~~,KAAK,CAAC,IAAI,CAAC,OAAO~~;;;;;;;;;GAS9B~~,CAAC;AACJ,CAAC,CAAC,CAAC;~~AAEH~~,~~oBAAoB~~,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\nimport { readableColor } from 'polished';\n\nimport { Label, defaultThemeProp, Card, Text } from '@pega/cosmos-react-core';\n\nimport { ~~NodeProps~~ } from './Node.types';\n\nexport const StyledCircle = styled.div<{ ~~type~~: ~~string~~ }>(({ theme, ~~type~~ }) => {\n ~~const bgColor = type === 'start' ? theme.base.colors.green.medium : theme.base.colors.red.light;\n~~ return css`\n height: 2rem;\n width: 2rem;\n background: ${~~bgColor~~};\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: ~~string~~ }>(({ type, theme }) => {\n return css`\n align-self: center;\n ${type === '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<~~Pick<NodeProps,~~ ~~'type'>>~~(({ theme, ~~type~~ }) => {\n const visualBg: { [key: string]: string } = {\n assignment: theme.base.colors.green.medium,\n decision: theme.base.colors.purple.medium,\n question: theme.base.colors.green.dark,\n message: theme.base.colors.orange.medium,\n automation: theme.base.colors.blue.light\n };\n\n const contrastColor = readableColor(~~visualBg[type]~~);\n\n return css`\n min-height: 2rem;\n min-width: 2rem;\n background: ${~~visualBg[type]~~};\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: calc(0.25 * ${theme.base['border-radius']});\n `;\n});\n\nStyledIcon.defaultProps = defaultThemeProp;\n\nexport const StyledCardHeader = styled.header(() => {\n return css`\n white-space: nowrap;\n button {\n visibility: hidden;\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 ~~max~~-width: 12rem;\n text-overflow: ellipsis;\n `;\n});\n\nStyledText.defaultProps = defaultThemeProp;\n\nexport const StyledCard = styled(Card)(({ theme }) => {\n return css`\n ~~min-~~width: 17.5rem;\n ~~min-~~height: ~~7rem~~;\n align-self: center;\n overflow: hidden;\n &&& {\n border-radius: calc(0.5 * ${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\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-~~width: 17.5rem;\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.div(({ theme }) => {\n return css`\n padding: ${theme.base.spacing};\n ~~padding~~-~~block-start~~: 0;\n ~~max~~-~~width~~: 17.~~5rem~~;\n ~~max-height:~~ ~~1rem~~;\n ~~display~~: ~~-webkit-box~~;\n ~~-webkit-line-clamp~~: 1;\n ~~-webkit-box-orient~~: ~~vertical~~;\n ~~overflow~~: ~~hidden~~;\n text-overflow: ellipsis;\n `;\n});\~~n\nStyledAdditionalData~~.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';\nimport { readableColor } from 'polished';\n\nimport { Label, defaultThemeProp, Card, Text, CardFooter } from '@pega/cosmos-react-core';\n\nimport { NodeType } from './Node.types';\n\nexport const StyledCircle = styled.div<{ color: NodeType['color'] }>(({ theme, color }) => {\n return css`\n height: 2rem;\n width: 2rem;\n background: ${color};\n border-radius: 50%;\n align-self: center;\n &:focus {\n outline: none;\n box-shadow: ${theme.base.shadow.focus};\n }\n `;\n});\n\nStyledCircle.defaultProps = defaultThemeProp;\n\nexport const StyledLabel = styled(Label)<{ type: NodeType }>(({ type, theme }) => {\n return css`\n align-self: center;\n ${type.name === 'start'\n ? css`\n padding-block-end: ${theme.base.spacing};\n `\n : css`\n padding-block-start: ${theme.base.spacing};\n `}\n `;\n});\n\nStyledLabel.defaultProps = defaultThemeProp;\n\nexport const StyledIcon = styled.div<{ color: string }>(({ theme, color }) => {\n const contrastColor = readableColor(color);\n\n return css`\n min-height: 2rem;\n min-width: 2rem;\n background: ${color};\n padding: calc(0.5 * ${theme.base.spacing});\n margin-inline-end: ${theme.base.spacing};\n text-align: center;\n color: ${contrastColor};\n border-radius: ${theme.base['border-radius']};\n `;\n});\n\nStyledIcon.defaultProps = defaultThemeProp;\n\nexport const StyledCardHeader = styled.header(({ theme }) => {\n return css`\n white-space: nowrap;\n button {\n visibility: hidden;\n border-radius: ${theme.base['border-radius']};\n }\n `;\n});\n\nStyledCardHeader.defaultProps = defaultThemeProp;\n\nexport const StyledText = styled(Text)(({ theme }) => {\n return css`\n padding-inline-end: ${theme.base.spacing};\n overflow: hidden;\n min-width: 12rem;\n text-overflow: ellipsis;\n `;\n});\n\nStyledText.defaultProps = defaultThemeProp;\n\nexport const StyledCard = styled(Card)(({ theme }) => {\n return css`\n width: 17.5rem;\n height: 7.5rem;\n align-self: center;\n overflow: hidden;\n &&& {\n border-radius: ${theme.base['border-radius']};\n }\n &:focus-within,\n &:hover {\n box-shadow: ${theme.base.shadow.focus};\n cursor: pointer;\n ${StyledCardHeader} {\n button {\n visibility: visible;\n }\n }\n }\n `;\n});\n\nexport const StyledCardFooter = styled(CardFooter)(() => {\n return css`\n margin-top: auto;\n &:not(${StyledCard} ${StyledCard} > &) {\n padding: 0.5rem;\n }\n `;\n});\n\nStyledCard.defaultProps = defaultThemeProp;\n\nexport const StyledCardContent = styled.div(({ theme }) => {\n return css`\n padding: ${theme.base.spacing};\n padding-block-start: 0;\n max-height: 2.5rem;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n `;\n});\n\nStyledCardContent.defaultProps = defaultThemeProp;\n\nexport const StyledAdditionalData = styled.dl`\n overflow: hidden;\n`;\n\nexport const StyledAdditionalDataItem = styled.div(({ theme }) => {\n return css`\n padding: 0 calc(0.5 * ${theme.base.spacing});\n background-color: ${theme.base.palette['secondary-background']};\n border-radius: ${theme.base['border-radius']};\n `;\n});\nStyledAdditionalDataItem.defaultProps = defaultThemeProp;\n\nexport const StyledTextWithEllipsis = styled(Text)(() => {\n return css`\n overflow: hidden;\n width: auto;\n display: inline-block;\n white-space: nowrap;\n text-overflow: ellipsis;\n `;\n});\nStyledTextWithEllipsis.defaultProps = defaultThemeProp;\n"]}

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

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

package/lib/components/FlowModeller/Node/NodeTemplates.d.ts.map 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,~~EAAsD~~,MAAM,OAAO,CAAC;~~AAuB5F~~,OAAO,EAAE,SAAS,EAAE,kBAAkB,~~EAAE~~,MAAM,cAAc,CAAC;~~AAE7D~~,eAAO,MAAM,~~gBAAgB,EAAE;KAAG,GAAG,IAAI,SAAS,CAAC,MAAM,CAAC,GAAG,MAAM;CAQlE,CAAC;AAEF,eAAO,MAAM,~~WAAW,~~uOA2GvB~~,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,EAAE,eAAe,EAA0D,MAAM,OAAO,CAAC;AA0BhG,OAAO,EAAE,SAAS,EAAE,kBAAkB,EAA2B,MAAM,cAAc,CAAC;AA8DtF,eAAO,MAAM,WAAW,iOA8FvB,CAAC;AAEF,eAAO,MAAM,SAAS,oBAAqB,gBAAgB,SAAS,CAAC,gBASpE,CAAC;AAEF,eAAO,MAAM,OAAO,oBAAqB,gBAAgB,SAAS,CAAC,gBASlE,CAAC"}

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

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

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

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

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

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

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

@@ -0,0 +1 @@

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

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

@@ -0,0 +1,49 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import styled from 'styled-components';
+import { Icon, Menu, menuHelpers, Popover, SearchInput, useI18n, escapeRegExp } from '@pega/cosmos-react-core';
+import { StyledIcon } from './Node/NodeTemplate.styles';
+const StyledPopover = styled(Popover) `
+  min-width: 40ch;
+`;
+const NodeLibrary = forwardRef(({ show, target, items, onClick }, ref) => {
+    const [search, setSearch] = useState('');
+    const t = useI18n();
+    const searchEleRef = useRef(null);
+    useEffect(() => {
+        if (show) {
+            setSearch('');
+            searchEleRef?.current?.focus();
+        }
+    }, [show, searchEleRef.current]);
+    const searchRegex = useMemo(() => {
+        return new RegExp(escapeRegExp(search));
+    }, [search]);
+    const itemsToRender = useMemo(() => {
+        return menuHelpers.mapTree(search
+            ? menuHelpers.flatten(items).filter(({ primary }) => {
+                return searchRegex.test(primary);
+            })
+            : items, node => {
+            let selectable = false;
+            if (!node.items) {
+                selectable = true;
+            }
+            const nodeItem = node;
+            return {
+                ...node,
+                visual: nodeItem.type ? (_jsx(StyledIcon, { id: node.id, color: nodeItem.type.color, children: _jsx(Icon, { name: nodeItem.type.icon }, void 0) }, void 0)) : undefined,
+                count: node.items ? node.items.length : undefined,
+                secondary: node.secondary,
+                selected: selectable ? !!node.selected : undefined
+            };
+        });
+    }, [items, searchRegex]);
+    const onItemSelect = useCallback((id) => {
+        const selectedNode = menuHelpers.getItem(items, id);
+        onClick(selectedNode);
+    }, [onClick]);
+    return (_jsx(StyledPopover, { show: show, target: target, ref: ref, children: _jsx(Menu, { items: itemsToRender, onItemClick: onItemSelect, header: _jsx(SearchInput, { ref: searchEleRef, onSearchChange: setSearch, value: search, searchInputAriaLabel: t('search_nodes'), placeholder: t('search_nodes') }, void 0) }, void 0) }, void 0));
+});
+export default NodeLibrary;
+//# sourceMappingURL=NodeLibrary.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"NodeLibrary.js","sourceRoot":"","sources":["../../../src/components/FlowModeller/NodeLibrary.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n FC,\n forwardRef,\n PropsWithoutRef,\n Ref,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState\n} from 'react';\nimport styled from 'styled-components';\n\nimport {\n ForwardProps,\n Icon,\n Menu,\n MenuGroupProps,\n menuHelpers,\n MenuItemProps,\n Popover,\n SearchInput,\n useI18n,\n escapeRegExp\n} from '@pega/cosmos-react-core';\n\nimport { NodeLibraryItem } from './Node/Node.types';\nimport { StyledIcon } from './Node/NodeTemplate.styles';\n\nconst StyledPopover: typeof Popover = styled(Popover)`\n min-width: 40ch;\n`;\n\nexport interface NodeLibraryProps {\n show: boolean;\n target: HTMLElement | null;\n items: NodeLibraryItem[];\n onClick: (libItem: NodeLibraryItem) => void;\n}\n\nconst NodeLibrary: FC<NodeLibraryProps & ForwardProps> = forwardRef(\n (\n { show, target, items, onClick }: PropsWithoutRef<NodeLibraryProps>,\n ref: Ref<HTMLDivElement>\n ) => {\n const [search, setSearch] = useState('');\n\n const t = useI18n();\n const searchEleRef = useRef<HTMLInputElement>(null);\n\n useEffect(() => {\n if (show) {\n setSearch('');\n searchEleRef?.current?.focus();\n }\n }, [show, searchEleRef.current]);\n\n const searchRegex = useMemo(() => {\n return new RegExp(escapeRegExp(search));\n }, [search]);\n\n const itemsToRender: (MenuItemProps | MenuGroupProps)[] = useMemo(() => {\n return menuHelpers.mapTree(\n search\n ? menuHelpers.flatten(items).filter(({ primary }: MenuItemProps) => {\n return searchRegex.test(primary);\n })\n : items,\n node => {\n let selectable = false;\n if (!node.items) {\n selectable = true;\n }\n\n const nodeItem: NodeLibraryItem = node as NodeLibraryItem;\n return {\n ...node,\n visual: nodeItem.type ? (\n <StyledIcon id={node.id} color={nodeItem.type.color}>\n <Icon name={nodeItem.type.icon} />\n </StyledIcon>\n ) : undefined,\n count: node.items ? node.items.length : undefined,\n secondary: node.secondary,\n selected: selectable ? !!node.selected : undefined\n };\n }\n );\n }, [items, searchRegex]);\n\n const onItemSelect = useCallback(\n (id: MenuItemProps['id']) => {\n const selectedNode = menuHelpers.getItem(items, id) as NodeLibraryItem;\n onClick(selectedNode);\n },\n [onClick]\n );\n\n return (\n <StyledPopover show={show} target={target} ref={ref}>\n <Menu\n items={itemsToRender}\n onItemClick={onItemSelect}\n header={\n <SearchInput\n ref={searchEleRef}\n onSearchChange={setSearch}\n value={search}\n searchInputAriaLabel={t('search_nodes')}\n placeholder={t('search_nodes')}\n />\n }\n />\n </StyledPopover>\n );\n }\n);\n\nexport default NodeLibrary;\n"]}

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

@@ -0,0 +1,10 @@
+import { FC, MouseEvent } from 'react';
+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 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 declare const AddButton: FC<AddBtnProps>;
+export {};
+//# sourceMappingURL=AddNode.d.ts.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"AddNode.d.ts","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Renderer/AddNode.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAWvC,eAAO,MAAM,SAAS,mOAKpB,CAAC;AAIH,eAAO,MAAM,aAAa,yGASxB,CAAC;AAIH,eAAO,MAAM,YAAY,qOAcvB,CAAC;AAIH,UAAU,WAAW;IACnB,cAAc,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CAC5D;AAED,eAAO,MAAM,SAAS,EAAE,EAAE,CAAC,WAAW,CAWrC,CAAC"}

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

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled, { css } from 'styled-components';
+import { Button, defaultThemeProp, Flex, Icon, useI18n, StyledTooltip } 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 StyledWrapper = styled.div(() => {
+    return css `
+    ${StyledTooltip} {
+      ${css `
+        min-width: 12ch;
+        text-align: center;
+      `}
+    }
+  `;
+});
+StyledWrapper.defaultProps = defaultThemeProp;
+export const StyledButton = styled(Button)(({ theme }) => {
+    return css `
+    opacity: 0;
+    top: -0.25rem;
+    border: 0;
+    color: ${theme.base.colors.black};
+    background: ${theme.base.colors.white};
+    &:hover,
+    &:active,
+    &:focus {
+      opacity: 1;
+      background: ${theme.base.colors.white};
+    }
+  `;
+});
+StyledButton.defaultProps = defaultThemeProp;
+export const AddButton = ({ addNodeHandler }) => {
+    const t = useI18n();
+    return (_jsxs(Flex, { container: { justify: 'center' }, as: StyledWrapper, children: [_jsx(StyledDot, { name: 'circle-solid' }, void 0), _jsx(StyledButton, { label: t('add_noun', [t('node').toLowerCase()]), icon: true, onClick: addNodeHandler, children: _jsx(Icon, { name: 'plus' }, void 0) }, void 0)] }, void 0));
+};
+//# sourceMappingURL=AddNode.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"AddNode.js","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Renderer/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,EACd,MAAM,yBAAyB,CAAC;AAEjC,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,aAAa,GAAG,MAAM,CAAC,GAAG,CAAC,GAAG,EAAE;IAC3C,OAAO,GAAG,CAAA;MACN,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;kBAClB,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;;;;;oBAKrB,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;;GAExC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,YAAY,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAM7C,MAAM,CAAC,MAAM,SAAS,GAAoB,CAAC,EAAE,cAAc,EAAE,EAAE,EAAE;IAC/D,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAE,aAAa,aACvD,KAAC,SAAS,IAAC,IAAI,EAAC,cAAc,WAAG,EACjC,KAAC,YAAY,IAAC,KAAK,EAAE,CAAC,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,WAAW,EAAE,CAAC,CAAC,EAAE,IAAI,QAAC,OAAO,EAAE,cAAc,YACzF,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,WAAG,WACP,YACV,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} from '@pega/cosmos-react-core';\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 StyledWrapper = styled.div(() => {\n return css`\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 opacity: 0;\n top: -0.25rem;\n border: 0;\n color: ${theme.base.colors.black};\n background: ${theme.base.colors.white};\n &:hover,\n &:active,\n &:focus {\n opacity: 1;\n background: ${theme.base.colors.white};\n }\n `;\n});\n\nStyledButton.defaultProps = defaultThemeProp;\n\ninterface AddBtnProps {\n addNodeHandler: (e: MouseEvent<HTMLButtonElement>) => void;\n}\n\nexport const AddButton: FC<AddBtnProps> = ({ addNodeHandler }) => {\n const t = useI18n();\n\n return (\n <Flex container={{ justify: 'center' }} as={StyledWrapper}>\n <StyledDot name='circle-solid' />\n <StyledButton label={t('add_noun', [t('node').toLowerCase()])} icon onClick={addNodeHandler}>\n <Icon name='plus' />\n </StyledButton>\n </Flex>\n );\n};\n"]}

package/lib/components/FlowModeller/Renderer/Connector.d.ts ADDED Viewed

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { RendererConnectorProps } from './Renderer.types';
+declare const Connector: FC<RendererConnectorProps>;
+export default Connector;
+//# sourceMappingURL=Connector.d.ts.map

package/lib/components/FlowModeller/Renderer/Connector.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"Connector.d.ts","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Renderer/Connector.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAK3B,OAAO,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAgE1D,QAAA,MAAM,SAAS,EAAE,EAAE,CAAC,sBAAsB,CAoBzC,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/lib/components/FlowModeller/Renderer/Connector.js ADDED Viewed

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled, { css } from 'styled-components';
+import { defaultThemeProp, Flex, Label, useTheme } from '@pega/cosmos-react-core';
+const CURVE_RADIUS = 16;
+const genLine = (points) => {
+    const lineStr = points
+        .map((point, idx, arr) => {
+        const { x, y } = point;
+        const prev = arr[idx - 1];
+        const next = arr[idx + 1];
+        const line = `L${x},${y}`;
+        // if the point is extream end, no need to add a curve
+        if (!prev || !next)
+            return line;
+        // if point is colinear with prev and next, no need to add a curve
+        if (prev.x === next.x || prev.y === next.y)
+            return line;
+        if (point.x > next.x)
+            // BOTTOM-RIGHT ↲
+            return `L${x},${y - CURVE_RADIUS}a${CURVE_RADIUS},${CURVE_RADIUS} 0 0 1 -${CURVE_RADIUS},${CURVE_RADIUS}`;
+        // BOTTOM-LEFT ↳
+        if (point.x < next.x)
+            return `L${x},${y - CURVE_RADIUS}a${CURVE_RADIUS},${CURVE_RADIUS} 0 0 0 ${CURVE_RADIUS},${CURVE_RADIUS}`;
+        // TOP-LEFT ↱
+        if (point.x < prev.x)
+            return `L${x + CURVE_RADIUS},${y}a${CURVE_RADIUS},${CURVE_RADIUS} 0 0 0 -${CURVE_RADIUS},${CURVE_RADIUS}`;
+        // TOP-RIGHT ↴
+        if (point.x > prev.x)
+            return `L${x - CURVE_RADIUS},${y}a${CURVE_RADIUS},${CURVE_RADIUS} 0 0 1 ${CURVE_RADIUS},${CURVE_RADIUS}`;
+        return `L${x},${y}`;
+    })
+        .join('');
+    return `M${lineStr.substr(1)}`;
+};
+const StyledLabel = styled(Label)(({ 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});
+  `;
+});
+StyledLabel.defaultProps = defaultThemeProp;
+const Connector = ({ points, labelLayout }) => {
+    const theme = useTheme();
+    return (_jsxs("g", { children: [_jsx("path", { d: genLine(points), stroke: theme.base.colors.slate.dark, strokeWidth: '1', fill: 'none' }, void 0), labelLayout?.value && (_jsx("foreignObject", { x: labelLayout.x - labelLayout.width, y: labelLayout.y + 15, width: labelLayout.width, height: labelLayout.height, children: _jsx(Flex, { container: { justify: 'center' }, children: _jsx(StyledLabel, { children: labelLayout.value }, void 0) }, void 0) }, void 0))] }, void 0));
+};
+export default Connector;
+//# sourceMappingURL=Connector.js.map

package/lib/components/FlowModeller/Renderer/Connector.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"Connector.js","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Renderer/Connector.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp, Flex, Label, useTheme } from '@pega/cosmos-react-core';\n\nimport { RendererConnectorProps } from './Renderer.types';\n\ninterface Points {\n x: number;\n y: number;\n}\n\nconst CURVE_RADIUS = 16;\nconst genLine = (points: Points[]) => {\n const lineStr: string = points\n .map((point: Points, idx: number, arr: Points[]) => {\n const { x, y } = point;\n const prev = arr[idx - 1];\n const next = arr[idx + 1];\n const line = `L${x},${y}`;\n\n // if the point is extream end, no need to add a curve\n if (!prev || !next) return line;\n\n // if point is colinear with prev and next, no need to add a curve\n if (prev.x === next.x || prev.y === next.y) return line;\n\n if (point.x > next.x)\n // BOTTOM-RIGHT ↲\n return `L${x},${\n y - CURVE_RADIUS\n }a${CURVE_RADIUS},${CURVE_RADIUS} 0 0 1 -${CURVE_RADIUS},${CURVE_RADIUS}`;\n\n // BOTTOM-LEFT ↳\n if (point.x < next.x)\n return `L${x},${\n y - CURVE_RADIUS\n }a${CURVE_RADIUS},${CURVE_RADIUS} 0 0 0 ${CURVE_RADIUS},${CURVE_RADIUS}`;\n\n // TOP-LEFT ↱\n if (point.x < prev.x)\n return `L${\n x + CURVE_RADIUS\n },${y}a${CURVE_RADIUS},${CURVE_RADIUS} 0 0 0 -${CURVE_RADIUS},${CURVE_RADIUS}`;\n\n // TOP-RIGHT ↴\n if (point.x > prev.x)\n return `L${\n x - CURVE_RADIUS\n },${y}a${CURVE_RADIUS},${CURVE_RADIUS} 0 0 1 ${CURVE_RADIUS},${CURVE_RADIUS}`;\n\n return `L${x},${y}`;\n })\n .join('');\n return `M${lineStr.substr(1)}`;\n};\n\nconst StyledLabel = styled(Label)(({ 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\nStyledLabel.defaultProps = defaultThemeProp;\n\nconst Connector: FC<RendererConnectorProps> = ({ points, labelLayout }) => {\n const theme = useTheme();\n\n return (\n <g>\n <path d={genLine(points)} stroke={theme.base.colors.slate.dark} strokeWidth='1' fill='none' />\n {labelLayout?.value && (\n <foreignObject\n x={labelLayout.x - labelLayout.width}\n y={labelLayout.y + 15}\n width={labelLayout.width}\n height={labelLayout.height}\n >\n <Flex container={{ justify: 'center' }}>\n <StyledLabel>{labelLayout.value}</StyledLabel>\n </Flex>\n </foreignObject>\n )}\n </g>\n );\n};\n\nexport default Connector;\n"]}

package/lib/components/FlowModeller/Renderer/ConnectorsContainer.d.ts ADDED Viewed

@@ -0,0 +1,12 @@
+import { FC } from 'react';
+import { RendererConnectorProps } from './Renderer.types';
+export interface ConnectorsContainerProps {
+    items: RendererConnectorProps[];
+    dimensions: {
+        width: number;
+        height: number;
+    };
+}
+declare const ConnectorsContainer: FC<ConnectorsContainerProps>;
+export default ConnectorsContainer;
+//# sourceMappingURL=ConnectorsContainer.d.ts.map

package/lib/components/FlowModeller/Renderer/ConnectorsContainer.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ConnectorsContainer.d.ts","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Renderer/ConnectorsContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAI3B,OAAO,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAQ1D,MAAM,WAAW,wBAAwB;IACvC,KAAK,EAAE,sBAAsB,EAAE,CAAC;IAChC,UAAU,EAAE;QACV,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;CACH;AAED,QAAA,MAAM,mBAAmB,EAAE,EAAE,CAAC,wBAAwB,CAerD,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/lib/components/FlowModeller/Renderer/ConnectorsContainer.js ADDED Viewed

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled from 'styled-components';
+import Connector from './Connector';
+const StyledConnectorContainer = styled.div `
+  position: absolute;
+  top: 0;
+  left: 0;
+`;
+const ConnectorsContainer = ({ items, dimensions }) => {
+    return (_jsx(StyledConnectorContainer, { children: _jsx("svg", { width: dimensions.width, height: dimensions.height, xmlns: 'http://www.w3.org/2000/svg', viewBox: `0 0 ${dimensions.width} ${dimensions.height}`, children: items.map(item => {
+                return _jsx(Connector, { ...item }, item.id);
+            }) }, void 0) }, void 0));
+};
+export default ConnectorsContainer;
+//# sourceMappingURL=ConnectorsContainer.js.map

package/lib/components/FlowModeller/Renderer/ConnectorsContainer.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ConnectorsContainer.js","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Renderer/ConnectorsContainer.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,SAAS,MAAM,aAAa,CAAC;AAGpC,MAAM,wBAAwB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAI1C,CAAC;AAUF,MAAM,mBAAmB,GAAiC,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,EAAE,EAAE;IAClF,OAAO,CACL,KAAC,wBAAwB,cACvB,cACE,KAAK,EAAE,UAAU,CAAC,KAAK,EACvB,MAAM,EAAE,UAAU,CAAC,MAAM,EACzB,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAE,OAAO,UAAU,CAAC,KAAK,IAAI,UAAU,CAAC,MAAM,EAAE,YAEtD,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;gBAChB,OAAO,KAAC,SAAS,OAAmB,IAAI,IAAjB,IAAI,CAAC,EAAE,CAAc,CAAC;YAC/C,CAAC,CAAC,WACE,WACmB,CAC5B,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,mBAAmB,CAAC","sourcesContent":["import { FC } from 'react';\nimport styled from 'styled-components';\n\nimport Connector from './Connector';\nimport { RendererConnectorProps } from './Renderer.types';\n\nconst StyledConnectorContainer = styled.div`\n position: absolute;\n top: 0;\n left: 0;\n`;\n\nexport interface ConnectorsContainerProps {\n items: RendererConnectorProps[];\n dimensions: {\n width: number;\n height: number;\n };\n}\n\nconst ConnectorsContainer: FC<ConnectorsContainerProps> = ({ items, dimensions }) => {\n return (\n <StyledConnectorContainer>\n <svg\n width={dimensions.width}\n height={dimensions.height}\n xmlns='http://www.w3.org/2000/svg'\n viewBox={`0 0 ${dimensions.width} ${dimensions.height}`}\n >\n {items.map(item => {\n return <Connector key={item.id} {...item} />;\n })}\n </svg>\n </StyledConnectorContainer>\n );\n};\n\nexport default ConnectorsContainer;\n"]}

package/lib/components/FlowModeller/Renderer/Node.d.ts ADDED Viewed

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { RendererNodeProps } from './Renderer.types';
+declare const Node: FC<RendererNodeProps>;
+export default Node;
+//# sourceMappingURL=Node.d.ts.map

package/lib/components/FlowModeller/Renderer/Node.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"Node.d.ts","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Renderer/Node.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAK3B,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAgBrD,QAAA,MAAM,IAAI,EAAE,EAAE,CAAC,iBAAiB,CAM/B,CAAC;AAEF,eAAe,IAAI,CAAC"}