@pega/cosmos-react-build 4.0.0-dev.7.0 → 4.0.0-dev.8.0

package/lib/components/AppShell/AppShell.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppShell.types.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.types.ts"],"names":[],"mappings":"","sourcesContent":["import { Dispatch, ReactNode, Ref, SetStateAction } from 'react';\n\nimport {\n  StandardTreeProps,\n  DrawerProps,\n  NoChildrenProp,\n  AvatarProps,\n  OmitStrict\n} from '@pega/cosmos-react-core';\nimport { expandCollapseStates } from '@pega/cosmos-react-core/lib/hooks/useTransitionState';\n\nimport { AppHeaderProps } from './Header/AppHeader.types';\n\nexport interface AppShellProps extends NoChildrenProp {\n  main: ReactNode;\n  appInfo: AppInfoProps;\n  appHeader: AppHeaderProps;\n  navigation: StandardTreeProps;\n  hideNav?: boolean;\n  utils?: UtilsProps;\n  ref?: Ref<HTMLElement>;\n}\n\nexport interface UtilsProps {\n  items: UtilItem[];\n  currentItemId?: UtilItem['id'];\n  onItemClick: (id: UtilItem['id']) => void;\n  drawer?: Pick<DrawerProps, 'onBeforeOpen' | 'onAfterOpen' | 'onBeforeClose' | 'onAfterClose'>;\n  devMode?: boolean;\n}\n\nexport interface UtilItem {\n  id: string;\n  label: string;\n}\n\nexport interface AppInfoProps {\n  text: string;\n  visual?: OmitStrict<AvatarProps, 'name' | 'shape' | 'size' | 'status'>;\n  meta?: string[];\n}\n\nexport interface AppShellContextValue {\n  drawerOpen: boolean;\n  setDrawerOpen: Dispatch<SetStateAction<boolean>>;\n  setDrawerData: Dispatch<SetStateAction<UtilItem | undefined>>;\n  drawerData?: {\n    label: string;\n    id: string;\n  };\n  navState: typeof expandCollapseStates[keyof typeof expandCollapseStates];\n}\n"]}
+{"version":3,"file":"AppShell.types.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.types.ts"],"names":[],"mappings":"","sourcesContent":["import { KeyboardEvent, MouseEvent, ReactNode } from 'react';\n\nimport { AsProp, BaseProps, NoChildrenProp } from '@pega/cosmos-react-core';\nimport { openCloseStates } from '@pega/cosmos-react-core/lib/hooks/useTransitionState';\n\nimport { AppHeaderProps } from './Header/AppHeader.types';\n\nexport interface NestedNavItemProps {\n  /** Unique id for the nav item. */\n  id: string;\n  /** The display text of the nav item. */\n  label: string;\n  /** URL or DOM id to navigate to. This will render the nav item as a link. */\n  href?: string;\n  /** Click handler for the nav item. */\n  onClick?: (id: string, e: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>) => void;\n  /** A set of nested nav items. */\n  items?: NestedNavItemProps[];\n}\n\ninterface ParentNavItemProps {\n  /** A set of nested nav items. */\n  items?: NestedNavItemProps[];\n  href?: never;\n  onClick?: never;\n}\n\ninterface NavLinkProps {\n  /** URL or DOM id to navigate to. This will render the nav item as a link. */\n  href?: string;\n  /** Click handler for the link. If no href if passed, this will render the nav item as a button. */\n  onClick?: (id: string, e: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>) => void;\n  items?: never;\n}\n\nexport type NavItemProps = {\n  /** Unique id for the nav item. */\n  id: string;\n  /** The display text of the nav item. */\n  label: string;\n  /** The name of the Cosmos Icon to render as a visual. Only applies to top-level nav items. */\n  icon: string;\n} & (ParentNavItemProps | NavLinkProps);\n\nexport interface NavProps {\n  /** A set of nav items that will render as a list in the App Shell. */\n  items: NavItemProps[];\n  /** The id of the active nav item. */\n  currentItemId?: NavItemProps['id'];\n}\n\nexport interface AppShellProps extends NoChildrenProp {\n  /** The content of the application. */\n  main: ReactNode;\n  /** Props related to the App Shell header. */\n  appHeader: AppHeaderProps;\n  /** Props related to the App Shell side navigation. */\n  nav: NavProps;\n}\n\nexport interface AppShellContextValue {\n  navOpen: boolean;\n  navState: typeof openCloseStates[keyof typeof openCloseStates];\n  openNav: () => void;\n}\n\nexport interface NavItemRenderProps extends AsProp, BaseProps, NoChildrenProp {\n  id: NavItemProps['id'];\n  label: NavItemProps['label'];\n  visual: ReactNode;\n  href?: NavLinkProps['href'];\n  onClick?: NavLinkProps['onClick'];\n  items?: NestedNavItemProps['items'];\n  currentItemId?: NavItemProps['id'];\n}\n"]}

package/lib/components/AppShell/AppShellContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppShellContext.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShellContext.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAExD,QAAA,MAAM,eAAe,+CAMnB,CAAC;AAEH,eAAe,eAAe,CAAC"}
+{"version":3,"file":"AppShellContext.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShellContext.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAExD,QAAA,MAAM,eAAe,+CAInB,CAAC;AAEH,eAAe,eAAe,CAAC"}

package/lib/components/AppShell/AppShellContext.js

@@ -1,10 +1,8 @@
 import { createContext } from 'react';
 const AppShellContext = createContext({
-    drawerOpen: false,
-    setDrawerOpen: () => { },
-    drawerData: undefined,
-    setDrawerData: () => { },
-    navState: 'expanded'
+    navOpen: false,
+    navState: 'closed',
+    openNav: () => { }
 });
 export default AppShellContext;
 //# sourceMappingURL=AppShellContext.js.map

package/lib/components/AppShell/AppShellContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppShellContext.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShellContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAItC,MAAM,eAAe,GAAG,aAAa,CAAuB;IAC1D,UAAU,EAAE,KAAK;IACjB,aAAa,EAAE,GAAG,EAAE,GAAE,CAAC;IACvB,UAAU,EAAE,SAAS;IACrB,aAAa,EAAE,GAAG,EAAE,GAAE,CAAC;IACvB,QAAQ,EAAE,UAAU;CACrB,CAAC,CAAC;AAEH,eAAe,eAAe,CAAC","sourcesContent":["import { createContext } from 'react';\n\nimport { AppShellContextValue } from './AppShell.types';\n\nconst AppShellContext = createContext<AppShellContextValue>({\n  drawerOpen: false,\n  setDrawerOpen: () => {},\n  drawerData: undefined,\n  setDrawerData: () => {},\n  navState: 'expanded'\n});\n\nexport default AppShellContext;\n"]}
+{"version":3,"file":"AppShellContext.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShellContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAItC,MAAM,eAAe,GAAG,aAAa,CAAuB;IAC1D,OAAO,EAAE,KAAK;IACd,QAAQ,EAAE,QAAQ;IAClB,OAAO,EAAE,GAAG,EAAE,GAAE,CAAC;CAClB,CAAC,CAAC;AAEH,eAAe,eAAe,CAAC","sourcesContent":["import { createContext } from 'react';\n\nimport { AppShellContextValue } from './AppShell.types';\n\nconst AppShellContext = createContext<AppShellContextValue>({\n  navOpen: false,\n  navState: 'closed',\n  openNav: () => {}\n});\n\nexport default AppShellContext;\n"]}

package/lib/components/AppShell/NavigationList.d.ts

@@ -0,0 +1,6 @@
+import { FunctionComponent } from 'react';
+import { NavProps, NavItemRenderProps } from './AppShell.types';
+export declare const NavLinkItem: FunctionComponent<NavItemRenderProps>;
+declare const NavigationList: FunctionComponent<NavProps>;
+export default NavigationList;
+//# sourceMappingURL=NavigationList.d.ts.map

package/lib/components/AppShell/NavigationList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationList.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/NavigationList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAOlB,MAAM,OAAO,CAAC;AAkBf,OAAO,EAAE,QAAQ,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AA2HhE,eAAO,MAAM,WAAW,EAAE,iBAAiB,CAAC,kBAAkB,CAgC7D,CAAC;AAEF,QAAA,MAAM,cAAc,EAAE,iBAAiB,CAAC,QAAQ,CA6B/C,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/lib/components/AppShell/NavigationList.js

@@ -0,0 +1,91 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useContext, useEffect, useRef, useState } from 'react';
+import { useTheme, useEscape, useDirection, Icon, Tooltip, ExpandCollapse, useElement, StandardTree, treeHelpers, useAfterInitialEffect } from '@pega/cosmos-react-core';
+import BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';
+import { StyledNavList, StyledAppShellCaretIcon, StyledNavListItem } from './AppShell.styles';
+import AppShellContext from './AppShellContext';
+const transformItems = (items, expandedIds) => {
+    if (!items)
+        return [];
+    return items.map(item => ({
+        id: item.id,
+        label: item.label,
+        onClick: (id, e) => {
+            e.stopPropagation();
+            item.onClick?.(id, e);
+        },
+        expanded: item.items ? expandedIds.has(item.id) : undefined,
+        href: item.href,
+        nodes: item.items ? transformItems(item.items, expandedIds) : undefined
+    }));
+};
+const NavParentItem = ({ id, label, visual, items, currentItemId }) => {
+    const { navOpen, navState, openNav } = useContext(AppShellContext);
+    const { end } = useDirection();
+    const { base: { animation } } = useTheme();
+    const [collapsed, setCollapsed] = useState(true);
+    const [managedItems, setManagedItems] = useState(() => transformItems(items, new Set()));
+    const buttonRef = useRef(null);
+    const treeRef = useRef(null);
+    const toggleCollapsed = (e) => {
+        e.stopPropagation();
+        if (!navOpen) {
+            setCollapsed(false);
+            openNav();
+        }
+        else
+            setCollapsed(state => !state);
+    };
+    useEscape(() => {
+        setCollapsed(true);
+        buttonRef.current?.focus();
+    }, treeRef);
+    useEffect(() => {
+        if (currentItemId && treeHelpers.getNode(managedItems, currentItemId)) {
+            setManagedItems(nodes => treeHelpers.expandTo(nodes, currentItemId));
+            setCollapsed(false);
+        }
+    }, []);
+    useAfterInitialEffect(() => {
+        setManagedItems(cur => {
+            const expandedIds = new Set();
+            treeHelpers.forEachNode(cur, node => {
+                if (node.expanded)
+                    expandedIds.add(node.id);
+            });
+            return transformItems(items, expandedIds);
+        });
+    }, [items]);
+    return (_jsxs(_Fragment, { children: [_jsxs(BareButton, { id: id, ref: buttonRef, "aria-expanded": !collapsed, "aria-controls": `${id}-tree`, "aria-label": label, onClick: toggleCollapsed, children: [visual, _jsx("span", { children: label }), navState === 'open' && (_jsx(Icon, { name: `caret-${end}`, as: StyledAppShellCaretIcon, nestedListCollapsed: collapsed }))] }), _jsx(ExpandCollapse, { id: `${id}-tree`, collapsed: collapsed || !navOpen, transitionSpeed: managedItems.length >= 10 ? `calc(2 * ${animation.speed})` : animation.speed, children: _jsx(StandardTree, { ref: treeRef, nodes: managedItems, currentNodeId: currentItemId, selectableParents: false, onNodeToggle: nodeId => {
+                        setManagedItems(nodes => treeHelpers.mapNode(nodes, nodeId, node => {
+                            return {
+                                ...node,
+                                expanded: !node.expanded
+                            };
+                        }));
+                    } }) })] }));
+};
+export const NavLinkItem = ({ id, label, visual, href, onClick }) => {
+    const { navOpen } = useContext(AppShellContext);
+    const { end } = useDirection();
+    const [listItemEl, setListItemEl] = useElement();
+    return (_jsxs(_Fragment, { children: [_jsxs(BareButton, { ref: setListItemEl, href: href, onClick: (e) => {
+                    e.stopPropagation();
+                    onClick?.(id, e);
+                }, "aria-label": label, children: [visual, _jsx("span", { children: label })] }), !navOpen && (_jsx(Tooltip, { target: listItemEl, placement: end, showDelay: 'none', hideDelay: 'none', children: label }))] }));
+};
+const NavigationList = ({ items, currentItemId }) => {
+    let ItemComponent;
+    return (_jsx(StyledNavList, { children: items.map(item => {
+            if (item.items) {
+                ItemComponent = NavParentItem;
+            }
+            else {
+                ItemComponent = NavLinkItem;
+            }
+            const ariaCurrent = item.href ? 'page' : 'true';
+            return (_jsx(StyledNavListItem, { "aria-current": currentItemId === item.id ? ariaCurrent : undefined, id: item.id, children: _jsx(ItemComponent, { ...item, visual: _jsx(Icon, { name: item.icon }), currentItemId: currentItemId }) }, item.id));
+        }) }));
+};
+export default NavigationList;
+//# sourceMappingURL=NavigationList.js.map

package/lib/components/AppShell/NavigationList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationList.js","sourceRoot":"","sources":["../../../src/components/AppShell/NavigationList.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  ElementType,\n  FunctionComponent,\n  KeyboardEvent,\n  MouseEvent,\n  useContext,\n  useEffect,\n  useRef,\n  useState\n} from 'react';\n\nimport {\n  useTheme,\n  useEscape,\n  useDirection,\n  Icon,\n  Tooltip,\n  ExpandCollapse,\n  useElement,\n  StandardTree,\n  StandardTreeNode,\n  StandardTreeProps,\n  treeHelpers,\n  useAfterInitialEffect\n} from '@pega/cosmos-react-core';\nimport BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';\n\nimport { NavProps, NavItemRenderProps } from './AppShell.types';\nimport { StyledNavList, StyledAppShellCaretIcon, StyledNavListItem } from './AppShell.styles';\nimport AppShellContext from './AppShellContext';\n\nconst transformItems = (\n  items: NavItemRenderProps['items'],\n  expandedIds: Set<StandardTreeNode['id']>\n): StandardTreeProps['nodes'] => {\n  if (!items) return [];\n\n  return items.map(item => ({\n    id: item.id,\n    label: item.label,\n    onClick: (id: string, e: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>) => {\n      e.stopPropagation();\n      item.onClick?.(id, e);\n    },\n    expanded: item.items ? expandedIds.has(item.id) : undefined,\n    href: item.href,\n    nodes: item.items ? transformItems(item.items, expandedIds) : undefined\n  }));\n};\n\nconst NavParentItem: FunctionComponent<NavItemRenderProps> = ({\n  id,\n  label,\n  visual,\n  items,\n  currentItemId\n}) => {\n  const { navOpen, navState, openNav } = useContext(AppShellContext);\n  const { end } = useDirection();\n  const {\n    base: { animation }\n  } = useTheme();\n  const [collapsed, setCollapsed] = useState(true);\n  const [managedItems, setManagedItems] = useState<StandardTreeProps['nodes']>(() =>\n    transformItems(items, new Set())\n  );\n\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const treeRef = useRef<HTMLUListElement>(null);\n\n  const toggleCollapsed = (e: MouseEvent<HTMLButtonElement>) => {\n    e.stopPropagation();\n    if (!navOpen) {\n      setCollapsed(false);\n      openNav();\n    } else setCollapsed(state => !state);\n  };\n\n  useEscape(() => {\n    setCollapsed(true);\n    buttonRef.current?.focus();\n  }, treeRef);\n\n  useEffect(() => {\n    if (currentItemId && treeHelpers.getNode(managedItems, currentItemId)) {\n      setManagedItems(nodes => treeHelpers.expandTo(nodes, currentItemId));\n      setCollapsed(false);\n    }\n  }, []);\n\n  useAfterInitialEffect(() => {\n    setManagedItems(cur => {\n      const expandedIds = new Set<StandardTreeNode['id']>();\n\n      treeHelpers.forEachNode(cur, node => {\n        if (node.expanded) expandedIds.add(node.id);\n      });\n\n      return transformItems(items, expandedIds);\n    });\n  }, [items]);\n\n  return (\n    <>\n      <BareButton\n        id={id}\n        ref={buttonRef}\n        aria-expanded={!collapsed}\n        aria-controls={`${id}-tree`}\n        aria-label={label}\n        onClick={toggleCollapsed}\n      >\n        {visual}\n        <span>{label}</span>\n        {navState === 'open' && (\n          <Icon\n            name={`caret-${end}`}\n            as={StyledAppShellCaretIcon}\n            nestedListCollapsed={collapsed}\n          />\n        )}\n      </BareButton>\n      <ExpandCollapse\n        id={`${id}-tree`}\n        collapsed={collapsed || !navOpen}\n        transitionSpeed={\n          managedItems.length >= 10 ? `calc(2 * ${animation.speed})` : animation.speed\n        }\n      >\n        <StandardTree\n          ref={treeRef}\n          nodes={managedItems as StandardTreeNode[]}\n          currentNodeId={currentItemId}\n          selectableParents={false}\n          onNodeToggle={nodeId => {\n            setManagedItems(nodes =>\n              treeHelpers.mapNode(nodes, nodeId, node => {\n                return {\n                  ...node,\n                  expanded: !node.expanded\n                };\n              })\n            );\n          }}\n        />\n      </ExpandCollapse>\n    </>\n  );\n};\n\nexport const NavLinkItem: FunctionComponent<NavItemRenderProps> = ({\n  id,\n  label,\n  visual,\n  href,\n  onClick\n}) => {\n  const { navOpen } = useContext(AppShellContext);\n  const { end } = useDirection();\n  const [listItemEl, setListItemEl] = useElement<HTMLAnchorElement | HTMLButtonElement>();\n\n  return (\n    <>\n      <BareButton\n        ref={setListItemEl}\n        href={href}\n        onClick={(e: MouseEvent<HTMLAnchorElement | HTMLButtonElement>) => {\n          e.stopPropagation();\n          onClick?.(id, e);\n        }}\n        aria-label={label}\n      >\n        {visual}\n        <span>{label}</span>\n      </BareButton>\n      {!navOpen && (\n        <Tooltip target={listItemEl} placement={end} showDelay='none' hideDelay='none'>\n          {label}\n        </Tooltip>\n      )}\n    </>\n  );\n};\n\nconst NavigationList: FunctionComponent<NavProps> = ({ items, currentItemId }) => {\n  let ItemComponent: ElementType;\n\n  return (\n    <StyledNavList>\n      {items.map(item => {\n        if (item.items) {\n          ItemComponent = NavParentItem;\n        } else {\n          ItemComponent = NavLinkItem;\n        }\n\n        const ariaCurrent = item.href ? 'page' : 'true';\n        return (\n          <StyledNavListItem\n            aria-current={currentItemId === item.id ? ariaCurrent : undefined}\n            key={item.id}\n            id={item.id}\n          >\n            <ItemComponent\n              {...item}\n              visual={<Icon name={item.icon} />}\n              currentItemId={currentItemId}\n            />\n          </StyledNavListItem>\n        );\n      })}\n    </StyledNavList>\n  );\n};\n\nexport default NavigationList;\n"]}

package/lib/components/AppShell/index.d.ts

@@ -1,5 +1,5 @@
 export { default } from './AppShell';
-export { AppShellProps } from './AppShell.types';
+export { AppShellProps, NavProps, NavItemProps, NestedNavItemProps } from './AppShell.types';
 export { AppHeaderProps } from './Header/AppHeader.types';
 export { BranchButtonProps } from './Header/BranchButton';
 //# sourceMappingURL=index.d.ts.map

package/lib/components/AppShell/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAC1D,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,YAAY,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAC7F,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAC1D,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC"}

package/lib/components/AppShell/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/AppShell/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC","sourcesContent":["export { default } from './AppShell';\nexport { AppShellProps } from './AppShell.types';\nexport { AppHeaderProps } from './Header/AppHeader.types';\nexport { BranchButtonProps } from './Header/BranchButton';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/AppShell/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC","sourcesContent":["export { default } from './AppShell';\nexport { AppShellProps, NavProps, NavItemProps, NestedNavItemProps } from './AppShell.types';\nexport { AppHeaderProps } from './Header/AppHeader.types';\nexport { BranchButtonProps } from './Header/BranchButton';\n"]}

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

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { Icon } from '@pega/cosmos-react-core';
 import { NodeType } from './Node.types';
 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, {
@@ -6,7 +7,9 @@ export declare const StyledLabel: import("styled-components").StyledComponent<im
 }, never>;
 export declare const StyledIcon: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledNodeTemplateHeader: 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 StyledText: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").TextProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {
+    error?: string | undefined;
+}, never>;
 export declare const StyledNodeTemplate: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").CardProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {
     highlight: boolean;
 }, never>;
@@ -15,4 +18,5 @@ export declare const StyledNodeTempleteContent: import("styled-components").Styl
 export declare const StyledAdditionalData: import("styled-components").StyledComponent<"dl", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledAdditionalDataItem: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledTextWithEllipsis: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").TextProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledErrorIcon: typeof Icon;
 //# sourceMappingURL=NodeTemplate.styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"NodeTemplate.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Node/NodeTemplate.styles.ts"],"names":[],"mappings":";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,wBAAwB,4GAOnC,CAAC;AAIH,eAAO,MAAM,UAAU,mOAOrB,CAAC;AAIH,eAAO,MAAM,kBAAkB;eAA6B,OAAO;SAoCjE,CAAC;AAIH,eAAO,MAAM,wBAAwB,yOAOnC,CAAC;AAIH,eAAO,MAAM,yBAAyB,yGAapC,CAAC;AAIH,eAAO,MAAM,oBAAoB,wGAEhC,CAAC;AAEF,eAAO,MAAM,wBAAwB,yGAMnC,CAAC;AAIH,eAAO,MAAM,sBAAsB,mOAQjC,CAAC"}
+{"version":3,"file":"NodeTemplate.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Node/NodeTemplate.styles.ts"],"names":[],"mappings":";AAEA,OAAO,EAA4C,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAEzF,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,wBAAwB,4GAOnC,CAAC;AAIH,eAAO,MAAM,UAAU;YAA0B,MAAM,GAAG,SAAS;SAOjE,CAAC;AAIH,eAAO,MAAM,kBAAkB;eAA6B,OAAO;SAoCjE,CAAC;AAIH,eAAO,MAAM,wBAAwB,yOAOnC,CAAC;AAIH,eAAO,MAAM,yBAAyB,yGAapC,CAAC;AAIH,eAAO,MAAM,oBAAoB,wGAEhC,CAAC;AAEF,eAAO,MAAM,wBAAwB,yGAMnC,CAAC;AAIH,eAAO,MAAM,sBAAsB,mOAQjC,CAAC;AAIH,eAAO,MAAM,eAAe,EAAE,OAAO,IAKnC,CAAC"}

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

@@ -1,5 +1,5 @@
 import styled, { css } from 'styled-components';
-import { defaultThemeProp, Card, Text, CardFooter } from '@pega/cosmos-react-core';
+import { defaultThemeProp, Card, Text, CardFooter, Icon } from '@pega/cosmos-react-core';
 export const StyledCircle = styled.div(({ theme }) => {
     return css `
     height: 2rem;
@@ -49,12 +49,12 @@ export const StyledNodeTemplateHeader = styled.header(({ theme }) => {
   `;
 });
 StyledNodeTemplateHeader.defaultProps = defaultThemeProp;
-export const StyledText = styled(Text)(({ theme }) => {
+export const StyledText = styled(Text)(({ error, theme }) => {
     return css `
     padding-inline-end: ${theme.base.spacing};
     overflow: hidden;
     text-overflow: ellipsis;
-    max-width: 24ch;
+    max-width: ${error ? '20ch' : '23ch'};
   `;
 });
 StyledText.defaultProps = defaultThemeProp;
@@ -141,4 +141,11 @@ export const StyledTextWithEllipsis = styled(Text)(() => {
   `;
 });
 StyledTextWithEllipsis.defaultProps = defaultThemeProp;
+export const StyledErrorIcon = styled(Icon)(({ theme }) => {
+    return css `
+    color: ${theme.base.palette.urgent};
+    margin-inline-end: ${theme.base.spacing};
+  `;
+});
+StyledErrorIcon.defaultProps = defaultThemeProp;
 //# sourceMappingURL=NodeTemplate.styles.js.map

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

@@ -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;AAEhD,OAAO,EAAE,gBAAgB,EAAE,IAAI,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAInF,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACnD,OAAO,GAAG,CAAA;;;;;;;;oBAQQ,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,IAAI,CAAC,CAAyB,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,EAAE;IACtF,OAAO,GAAG,CAAA;;MAEN,QAAQ,CAAC,IAAI,KAAK,OAAO;QACzB,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,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACjD,OAAO,GAAG,CAAA;;;0BAGc,KAAK,CAAC,IAAI,CAAC,OAAO;yBACnB,KAAK,CAAC,IAAI,CAAC,OAAO;;;;qBAItB,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;GAC7C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,UAAU,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3C,MAAM,CAAC,MAAM,wBAAwB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAClE,OAAO,GAAG,CAAA;;;uBAGW,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;;GAE/C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,wBAAwB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEzD,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,kBAAkB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAyB,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,EAAE;IAC9F,OAAO,GAAG,CAAA;;;;;;;MAON,SAAS;QACX,GAAG,CAAA;;iBAEU,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;4BACZ,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,aAAa,CAAC;;qCAE3B,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,MAAM;;KAE5D;;;uBAGkB,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;;;;;;;;oBAQ9B,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;;;;;+BAKZ,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW;;;GAG1D,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,CAAC,MAAM,wBAAwB,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACvE,OAAO,GAAG,CAAA;;YAEA,kBAAkB,IAAI,kBAAkB;iBACnC,KAAK,CAAC,IAAI,CAAC,OAAO;;GAEhC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,wBAAwB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEzD,MAAM,CAAC,MAAM,yBAAyB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAChE,OAAO,GAAG,CAAA;eACG,KAAK,CAAC,IAAI,CAAC,OAAO;;;;;;;;;;GAU9B,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,yBAAyB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE1D,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;AAEH,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;AAEH,sBAAsB,CAAC,YAAY,GAAG,gBAAgB,CAAC","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 StyledNodeTemplateHeader = styled.header(({ theme }) => {\n  return css`\n    white-space: nowrap;\n    button {\n      border-radius: ${theme.base['border-radius']};\n    }\n  `;\n});\n\nStyledNodeTemplateHeader.defaultProps = defaultThemeProp;\n\nexport const StyledText = styled(Text)(({ theme }) => {\n  return css`\n    padding-inline-end: ${theme.base.spacing};\n    overflow: hidden;\n    text-overflow: ellipsis;\n    max-width: 24ch;\n  `;\n});\n\nStyledText.defaultProps = defaultThemeProp;\n\nexport const StyledNodeTemplate = styled(Card)<{ highlight: boolean }>(({ highlight, theme }) => {\n  return css`\n    width: 17.5rem;\n    height: 7.5rem;\n    align-self: center;\n    overflow: hidden;\n    border: 0.125rem solid transparent;\n\n    ${highlight &&\n    css`\n      &&& {\n        color: ${theme.base.colors.black};\n        background-color: ${theme.base.colors.red['extra-light']};\n        border-radius: 0.25rem;\n        box-shadow: 0 0 0 0.125rem ${theme.base.colors.red.medium};\n      }\n    `}\n\n    &&& {\n      border-radius: ${theme.base['border-radius']};\n    }\n\n    &:hover {\n      cursor: pointer;\n    }\n\n    :focus-visible {\n      box-shadow: ${theme.base.shadow.focus};\n    }\n\n    &[aria-current='location'] {\n      box-shadow: none;\n      border: 0.125rem solid ${theme.base.palette.interactive};\n      cursor: pointer;\n    }\n  `;\n});\n\nStyledNodeTemplate.defaultProps = defaultThemeProp;\n\nexport const StyledNodeTemplateFooter = styled(CardFooter)(({ theme }) => {\n  return css`\n    margin-top: auto;\n    &:not(${StyledNodeTemplate} ${StyledNodeTemplate} > &) {\n      padding: ${theme.base.spacing};\n    }\n  `;\n});\n\nStyledNodeTemplateFooter.defaultProps = defaultThemeProp;\n\nexport const StyledNodeTempleteContent = 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\nStyledNodeTempleteContent.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});\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});\n\nStyledTextWithEllipsis.defaultProps = defaultThemeProp;\n"]}
+{"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, Icon } 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 StyledNodeTemplateHeader = styled.header(({ theme }) => {\n  return css`\n    white-space: nowrap;\n    button {\n      border-radius: ${theme.base['border-radius']};\n    }\n  `;\n});\n\nStyledNodeTemplateHeader.defaultProps = defaultThemeProp;\n\nexport const StyledText = styled(Text)<{ error?: string | undefined }>(({ error, theme }) => {\n  return css`\n    padding-inline-end: ${theme.base.spacing};\n    overflow: hidden;\n    text-overflow: ellipsis;\n    max-width: ${error ? '20ch' : '23ch'};\n  `;\n});\n\nStyledText.defaultProps = defaultThemeProp;\n\nexport const StyledNodeTemplate = styled(Card)<{ highlight: boolean }>(({ highlight, theme }) => {\n  return css`\n    width: 17.5rem;\n    height: 7.5rem;\n    align-self: center;\n    overflow: hidden;\n    border: 0.125rem solid transparent;\n\n    ${highlight &&\n    css`\n      &&& {\n        color: ${theme.base.colors.black};\n        background-color: ${theme.base.colors.red['extra-light']};\n        border-radius: 0.25rem;\n        box-shadow: 0 0 0 0.125rem ${theme.base.colors.red.medium};\n      }\n    `}\n\n    &&& {\n      border-radius: ${theme.base['border-radius']};\n    }\n\n    &:hover {\n      cursor: pointer;\n    }\n\n    :focus-visible {\n      box-shadow: ${theme.base.shadow.focus};\n    }\n\n    &[aria-current='location'] {\n      box-shadow: none;\n      border: 0.125rem solid ${theme.base.palette.interactive};\n      cursor: pointer;\n    }\n  `;\n});\n\nStyledNodeTemplate.defaultProps = defaultThemeProp;\n\nexport const StyledNodeTemplateFooter = styled(CardFooter)(({ theme }) => {\n  return css`\n    margin-top: auto;\n    &:not(${StyledNodeTemplate} ${StyledNodeTemplate} > &) {\n      padding: ${theme.base.spacing};\n    }\n  `;\n});\n\nStyledNodeTemplateFooter.defaultProps = defaultThemeProp;\n\nexport const StyledNodeTempleteContent = 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\nStyledNodeTempleteContent.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});\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});\n\nStyledTextWithEllipsis.defaultProps = defaultThemeProp;\n\nexport const StyledErrorIcon: typeof Icon = styled(Icon)(({ theme }) => {\n  return css`\n    color: ${theme.base.palette.urgent};\n    margin-inline-end: ${theme.base.spacing};\n  `;\n});\n\nStyledErrorIcon.defaultProps = defaultThemeProp;\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"NodeTemplates.d.ts","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Node/NodeTemplates.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,eAAe,EAQhB,MAAM,OAAO,CAAC;AA8Bf,OAAO,EAAE,SAAS,EAAE,kBAAkB,EAA2B,MAAM,cAAc,CAAC;AA8DtF,eAAO,MAAM,WAAW,0JAerB,kBAAkB,gBAuIpB,CAAC;AAEF,eAAO,MAAM,SAAS,oBAAqB,gBAAgB,SAAS,CAAC,gBAgBpE,CAAC;AAEF,eAAO,MAAM,OAAO,oBAAqB,gBAAgB,SAAS,CAAC,gBAgBlE,CAAC"}
+{"version":3,"file":"NodeTemplates.d.ts","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Node/NodeTemplates.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,eAAe,EAOhB,MAAM,OAAO,CAAC;AAuBf,OAAO,EAAE,SAAS,EAAE,kBAAkB,EAA2B,MAAM,cAAc,CAAC;AA6CtF,eAAO,MAAM,WAAW,0JAerB,kBAAkB,gBAkGpB,CAAC;AAEF,eAAO,MAAM,SAAS,oBAAqB,gBAAgB,SAAS,CAAC,gBAgBpE,CAAC;AAEF,eAAO,MAAM,OAAO,oBAAqB,gBAAgB,SAAS,CAAC,gBAgBlE,CAAC"}

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

@@ -1,29 +1,22 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useCallback, useEffect, useContext } from 'react';
+import { useCallback, useContext } from 'react';
 import { readableColor } from 'polished';
-import { MenuButton, Icon, Flex, Tooltip, useElement, useI18n, cap, Text } from '@pega/cosmos-react-core';
+import { MenuButton, Icon, Flex, useI18n, Text, registerIcon } from '@pega/cosmos-react-core';
+import * as warnSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/warn-solid.icon';
 import { colorMap } from '../../../utils';
 import FlowModellerContext from '../FlowModellerContext';
-import { StyledLabel, StyledCircle, StyledIcon, StyledNodeTemplateHeader, StyledNodeTempleteContent, StyledNodeTemplate, StyledText, StyledTextWithEllipsis, StyledAdditionalData, StyledNodeTemplateFooter, StyledAdditionalDataItem } from './NodeTemplate.styles';
+import { StyledLabel, StyledCircle, StyledIcon, StyledNodeTemplateHeader, StyledNodeTempleteContent, StyledNodeTemplate, StyledText, StyledTextWithEllipsis, StyledAdditionalData, StyledNodeTemplateFooter, StyledAdditionalDataItem, StyledErrorIcon } from './NodeTemplate.styles';
+registerIcon(warnSolidIcon);
 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 }), _jsx(Text, { role: 'separator', variant: 'secondary', "aria-hidden": 'true', children: ":\u00A0" }), _jsx(StyledTextWithEllipsis, { as: 'dt', children: value })] }), _jsx(Tooltip, { target: nodeAdditionalDataItem, hideDelay: 'none', children: `${label}:${value}` })] }));
+    return (_jsx(_Fragment, { children: _jsxs(Flex, { as: StyledAdditionalDataItem, container: { wrap: 'nowrap', pad: 0.25, gap: 0.25 }, item: { grow: 1 }, children: [_jsx(StyledTextWithEllipsis, { as: 'dd', children: label }), _jsx(Text, { role: 'separator', variant: 'secondary', "aria-hidden": 'true', children: ":\u00A0" }), _jsx(StyledTextWithEllipsis, { as: 'dt', children: value })] }) }));
 };
 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}` }) }), additionalDataValue && (_jsx(Tooltip, { target: nodeAdditionalData, hideDelay: 'none', children: additionalDataValue }))] }))] }));
+            }), metadata && metadata.length > 2 && (_jsx(_Fragment, { children: _jsx(Flex, { as: StyledAdditionalDataItem, container: { pad: 0.25 }, item: { grow: 1, shrink: 0 }, children: _jsx(StyledTextWithEllipsis, { as: 'dt', children: `+${metadata?.length - 2}` }) }) }))] }));
 };
 export const DefaultNode = ({ id, label, type, description, additionalData, actions, onActionClick, onClick, onDelete, reference, error, selected, referencedNode, ...restProps }) => {
     const t = useI18n();
@@ -55,25 +48,14 @@ export const DefaultNode = ({ id, label, type, description, additionalData, acti
             onClick?.(id, e);
         }
     }, [onClick]);
-    const [nodeLabel, setNodeLabel] = useElement();
-    const [nodeDescription, setNodeDescription] = useElement();
-    const [nodeIcon, setNodeIcon] = useElement();
-    const [nodeErrorToolTip, setNodeErrorToolTip] = useElement();
     const color = readableColor(colorMap[type.color]);
     const { readOnly, highlights } = useContext(FlowModellerContext);
-    useEffect(() => {
-        if (error) {
-            setNodeDescription(null);
-            setNodeLabel(null);
-            setNodeIcon(null);
-        }
-    }, [error]);
-    return (_jsxs(StyledNodeTemplate, { "aria-label": error || label, "aria-current": selected ? 'location' : undefined, onClick: (e) => onClick?.(id, e), onKeyDown: handleEnterKeyDown, ref: setNodeErrorToolTip, highlight: error ? true : !!highlights?.nodes?.[id], error: error, id: `modeller-node-${id}`, ...restProps, children: [_jsxs(Flex, { as: StyledNodeTemplateHeader, container: { alignItems: 'center', pad: 1, justify: 'between' }, children: [_jsxs(Flex, { container: { alignItems: 'center' }, children: [_jsx(StyledIcon, { id: id, style: {
+    return (_jsxs(StyledNodeTemplate, { "aria-label": error ? t('step_name_error', [label]) : label, "aria-current": selected ? 'location' : undefined, onClick: (e) => onClick?.(id, e), onKeyDown: handleEnterKeyDown, id: `modeller-node-${id}`, highlight: !!highlights?.nodes?.[id], ...restProps, children: [_jsxs(Flex, { as: StyledNodeTemplateHeader, container: { alignItems: 'center', pad: 1, justify: 'between' }, children: [_jsxs(Flex, { container: { alignItems: 'center' }, children: [error && _jsx(StyledErrorIcon, { name: 'warn-solid' }), _jsx(StyledIcon, { id: id, style: {
                                     '--bg-color': colorMap[type.color],
                                     '--fg-color': color
-                                }, ref: setNodeIcon, children: _jsx(Icon, { name: type.icon }) }), _jsx(Tooltip, { target: nodeIcon, hideDelay: 'none', children: cap(type.name) }), _jsx(StyledText, { variant: 'h4', ref: setNodeLabel, children: label }), _jsx(Tooltip, { describeTarget: false, target: nodeLabel, hideDelay: 'none', children: label })] }), !readOnly && actionItems && (_jsx(MenuButton, { portal: true, variant: 'simple', text: t('actions'), icon: 'more', iconOnly: true, onClick: (e) => e.stopPropagation(), onKeyDown: (e) => e.stopPropagation(), menu: {
+                                }, children: _jsx(Icon, { name: type.icon }) }), _jsx(StyledText, { variant: 'h4', children: label })] }), !readOnly && 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
-                        } }))] }), description && (_jsxs(_Fragment, { children: [_jsx(StyledNodeTempleteContent, { ref: setNodeDescription, children: description }), _jsx(Tooltip, { describeTarget: false, target: nodeDescription, hideDelay: 'none', children: description })] })), additionalData && type.minConnectors > 0 && (_jsx(StyledNodeTemplateFooter, { children: _jsx(MetaList, { metadata: additionalData }) })), references && type.minConnectors < 1 && (_jsx(StyledNodeTemplateFooter, { children: _jsx(MetaList, { metadata: references }) })), error && (_jsx(Tooltip, { target: nodeErrorToolTip, hideDelay: 'none', children: error }))] }));
+                        } }))] }), description && _jsx(StyledNodeTempleteContent, { children: description }), additionalData && type.minConnectors > 0 && (_jsx(StyledNodeTemplateFooter, { children: _jsx(MetaList, { metadata: additionalData }) })), references && type.minConnectors < 1 && (_jsx(StyledNodeTemplateFooter, { children: _jsx(MetaList, { metadata: references }) }))] }));
 };
 export const StartNode = ({ type, label }) => {
     return (_jsxs(Flex, { container: { justify: 'center', direction: 'column' }, children: [_jsx(StyledLabel, { nodeType: type, children: label }), _jsx(StyledCircle, { style: {

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

@@ -1 +1 @@
-{"version":3,"file":"NodeTemplates.js","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Node/NodeTemplates.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  PropsWithoutRef,\n  CSSProperties,\n  useCallback,\n  MouseEvent,\n  KeyboardEvent,\n  FC,\n  useEffect,\n  useContext\n} from 'react';\nimport { readableColor } from 'polished';\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 { colorMap } from '../../../utils';\nimport FlowModellerContext from '../FlowModellerContext';\n\nimport {\n  StyledLabel,\n  StyledCircle,\n  StyledIcon,\n  StyledNodeTemplateHeader,\n  StyledNodeTempleteContent,\n  StyledNodeTemplate,\n  StyledText,\n  StyledTextWithEllipsis,\n  StyledAdditionalData,\n  StyledNodeTemplateFooter,\n  StyledAdditionalDataItem\n} from './NodeTemplate.styles';\nimport { NodeProps, NodeComponentProps, AdditionalDataItemProps } from './Node.types';\n\nconst MetaListItem = ({ label, value }: AdditionalDataItemProps) => {\n  const [nodeAdditionalDataItem, setNodeAdditionalDataItem] = useElement();\n  return (\n    <>\n      <Flex\n        as={StyledAdditionalDataItem}\n        container={{ wrap: 'nowrap', pad: 0.25, gap: 0.25 }}\n        item={{ grow: 1 }}\n        ref={setNodeAdditionalDataItem}\n      >\n        <StyledTextWithEllipsis as='dd'>{label}</StyledTextWithEllipsis>\n        <Text role='separator' variant='secondary' aria-hidden='true'>\n          :&nbsp;\n        </Text>\n        <StyledTextWithEllipsis as='dt'>{value}</StyledTextWithEllipsis>\n      </Flex>\n      <Tooltip target={nodeAdditionalDataItem} hideDelay='none'>\n        {`${label}:${value}`}\n      </Tooltip>\n    </>\n  );\n};\n\nconst MetaList: FC<{ metadata: NodeProps['additionalData'] }> = ({ metadata }) => {\n  const [nodeAdditionalData, setNodeAdditionalData] = useElement();\n  let additionalDataValue = '';\n  metadata?.forEach((item: AdditionalDataItemProps, index: number) => {\n    if (index > 1) {\n      additionalDataValue += `${item.label}: ${item.value}\n      `;\n    }\n  });\n  return (\n    <Flex as={StyledAdditionalData} container={{ wrap: 'nowrap', colGap: 1, rowGap: 0.25 }}>\n      {metadata?.map((data: AdditionalDataItemProps, index: number) => {\n        if (index >= 2) {\n          return;\n        }\n        return <MetaListItem key={data.id} {...data} />;\n      })}\n      {metadata && metadata.length > 2 && (\n        <>\n          <Flex\n            as={StyledAdditionalDataItem}\n            container={{ pad: 0.25 }}\n            item={{ grow: 1, shrink: 0 }}\n            ref={setNodeAdditionalData}\n          >\n            <StyledTextWithEllipsis as='dt'>{`+${metadata?.length - 2}`}</StyledTextWithEllipsis>\n          </Flex>\n          {additionalDataValue && (\n            <Tooltip target={nodeAdditionalData} hideDelay='none'>\n              {additionalDataValue}\n            </Tooltip>\n          )}\n        </>\n      )}\n    </Flex>\n  );\n};\nexport const DefaultNode = ({\n  id,\n  label,\n  type,\n  description,\n  additionalData,\n  actions,\n  onActionClick,\n  onClick,\n  onDelete,\n  reference,\n  error,\n  selected,\n  referencedNode,\n  ...restProps\n}: NodeComponentProps) => {\n  const t = useI18n();\n\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 references = referencedNode && [\n    { id: referencedNode?.id, label: t('go_to_noun'), value: referencedNode?.label }\n  ];\n\n  if (onDelete !== undefined) {\n    actionItems?.push({\n      id: 'flowmodeller-delete-node',\n      primary: t('delete'),\n      onClick: (actionId: string, e: MouseEvent) => {\n        e.stopPropagation();\n        onDelete?.({ 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, e);\n      }\n    },\n    [onClick]\n  );\n\n  const [nodeLabel, setNodeLabel] = useElement();\n  const [nodeDescription, setNodeDescription] = useElement();\n\n  const [nodeIcon, setNodeIcon] = useElement();\n  const [nodeErrorToolTip, setNodeErrorToolTip] = useElement();\n  const color = readableColor(colorMap[type.color]);\n  const { readOnly, highlights } = useContext(FlowModellerContext);\n\n  useEffect(() => {\n    if (error) {\n      setNodeDescription(null);\n      setNodeLabel(null);\n      setNodeIcon(null);\n    }\n  }, [error]);\n\n  return (\n    <StyledNodeTemplate\n      aria-label={error || label}\n      aria-current={selected ? 'location' : undefined}\n      onClick={(e: MouseEvent) => onClick?.(id, e)}\n      onKeyDown={handleEnterKeyDown}\n      ref={setNodeErrorToolTip}\n      highlight={error ? true : !!highlights?.nodes?.[id]}\n      error={error}\n      id={`modeller-node-${id}`}\n      {...restProps}\n    >\n      <Flex\n        as={StyledNodeTemplateHeader}\n        container={{ alignItems: 'center', pad: 1, justify: 'between' }}\n      >\n        <Flex container={{ alignItems: 'center' }}>\n          <StyledIcon\n            id={id}\n            style={\n              {\n                '--bg-color': colorMap[type.color],\n                '--fg-color': color\n              } as CSSProperties\n            }\n            ref={setNodeIcon}\n          >\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        </Flex>\n        {!readOnly && 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          <StyledNodeTempleteContent ref={setNodeDescription}>\n            {description}\n          </StyledNodeTempleteContent>\n          <Tooltip describeTarget={false} target={nodeDescription} hideDelay='none'>\n            {description}\n          </Tooltip>\n        </>\n      )}\n      {additionalData && type.minConnectors > 0 && (\n        <StyledNodeTemplateFooter>\n          <MetaList metadata={additionalData} />\n        </StyledNodeTemplateFooter>\n      )}\n      {references && type.minConnectors < 1 && (\n        <StyledNodeTemplateFooter>\n          <MetaList metadata={references} />\n        </StyledNodeTemplateFooter>\n      )}\n      {error && (\n        <Tooltip target={nodeErrorToolTip} hideDelay='none'>\n          {error}\n        </Tooltip>\n      )}\n    </StyledNodeTemplate>\n  );\n};\n\nexport const StartNode = ({ type, label }: PropsWithoutRef<NodeProps>) => {\n  return (\n    <Flex container={{ justify: 'center', direction: 'column' }}>\n      <StyledLabel nodeType={type}>{label}</StyledLabel>\n      <StyledCircle\n        style={\n          {\n            '--bg-color': colorMap[type.color]\n          } as CSSProperties\n        }\n        tabIndex={0}\n        aria-label={label}\n        role='button'\n      />\n    </Flex>\n  );\n};\n\nexport const EndNode = ({ type, label }: PropsWithoutRef<NodeProps>) => {\n  return (\n    <Flex container={{ justify: 'center', direction: 'column' }}>\n      <StyledCircle\n        style={\n          {\n            '--bg-color': colorMap[type.color]\n          } as CSSProperties\n        }\n        tabIndex={0}\n        aria-label={label}\n        role='button'\n      />\n      <StyledLabel nodeType={type}>{label}</StyledLabel>\n    </Flex>\n  );\n};\n"]}
+{"version":3,"file":"NodeTemplates.js","sourceRoot":"","sources":["../../../../src/components/FlowModeller/Node/NodeTemplates.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  PropsWithoutRef,\n  CSSProperties,\n  useCallback,\n  MouseEvent,\n  KeyboardEvent,\n  FC,\n  useContext\n} from 'react';\nimport { readableColor } from 'polished';\n\nimport { MenuButton, Icon, Flex, useI18n, Text, registerIcon } from '@pega/cosmos-react-core';\nimport * as warnSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/warn-solid.icon';\n\nimport { colorMap } from '../../../utils';\nimport FlowModellerContext from '../FlowModellerContext';\n\nimport {\n  StyledLabel,\n  StyledCircle,\n  StyledIcon,\n  StyledNodeTemplateHeader,\n  StyledNodeTempleteContent,\n  StyledNodeTemplate,\n  StyledText,\n  StyledTextWithEllipsis,\n  StyledAdditionalData,\n  StyledNodeTemplateFooter,\n  StyledAdditionalDataItem,\n  StyledErrorIcon\n} from './NodeTemplate.styles';\nimport { NodeProps, NodeComponentProps, AdditionalDataItemProps } from './Node.types';\n\nregisterIcon(warnSolidIcon);\n\nconst MetaListItem = ({ label, value }: AdditionalDataItemProps) => {\n  return (\n    <>\n      <Flex\n        as={StyledAdditionalDataItem}\n        container={{ wrap: 'nowrap', pad: 0.25, gap: 0.25 }}\n        item={{ grow: 1 }}\n      >\n        <StyledTextWithEllipsis as='dd'>{label}</StyledTextWithEllipsis>\n        <Text role='separator' variant='secondary' aria-hidden='true'>\n          :&nbsp;\n        </Text>\n        <StyledTextWithEllipsis as='dt'>{value}</StyledTextWithEllipsis>\n      </Flex>\n    </>\n  );\n};\n\nconst MetaList: FC<{ metadata: NodeProps['additionalData'] }> = ({ metadata }) => {\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          >\n            <StyledTextWithEllipsis as='dt'>{`+${metadata?.length - 2}`}</StyledTextWithEllipsis>\n          </Flex>\n        </>\n      )}\n    </Flex>\n  );\n};\nexport const DefaultNode = ({\n  id,\n  label,\n  type,\n  description,\n  additionalData,\n  actions,\n  onActionClick,\n  onClick,\n  onDelete,\n  reference,\n  error,\n  selected,\n  referencedNode,\n  ...restProps\n}: NodeComponentProps) => {\n  const t = useI18n();\n\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 references = referencedNode && [\n    { id: referencedNode?.id, label: t('go_to_noun'), value: referencedNode?.label }\n  ];\n\n  if (onDelete !== undefined) {\n    actionItems?.push({\n      id: 'flowmodeller-delete-node',\n      primary: t('delete'),\n      onClick: (actionId: string, e: MouseEvent) => {\n        e.stopPropagation();\n        onDelete?.({ 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, e);\n      }\n    },\n    [onClick]\n  );\n\n  const color = readableColor(colorMap[type.color]);\n  const { readOnly, highlights } = useContext(FlowModellerContext);\n\n  return (\n    <StyledNodeTemplate\n      aria-label={error ? t('step_name_error', [label]) : label}\n      aria-current={selected ? 'location' : undefined}\n      onClick={(e: MouseEvent) => onClick?.(id, e)}\n      onKeyDown={handleEnterKeyDown}\n      id={`modeller-node-${id}`}\n      highlight={!!highlights?.nodes?.[id]}\n      {...restProps}\n    >\n      <Flex\n        as={StyledNodeTemplateHeader}\n        container={{ alignItems: 'center', pad: 1, justify: 'between' }}\n      >\n        <Flex container={{ alignItems: 'center' }}>\n          {error && <StyledErrorIcon name='warn-solid' />}\n          <StyledIcon\n            id={id}\n            style={\n              {\n                '--bg-color': colorMap[type.color],\n                '--fg-color': color\n              } as CSSProperties\n            }\n          >\n            <Icon name={type.icon} />\n          </StyledIcon>\n          <StyledText variant='h4'>{label}</StyledText>\n        </Flex>\n        {!readOnly && 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 && <StyledNodeTempleteContent>{description}</StyledNodeTempleteContent>}\n      {additionalData && type.minConnectors > 0 && (\n        <StyledNodeTemplateFooter>\n          <MetaList metadata={additionalData} />\n        </StyledNodeTemplateFooter>\n      )}\n      {references && type.minConnectors < 1 && (\n        <StyledNodeTemplateFooter>\n          <MetaList metadata={references} />\n        </StyledNodeTemplateFooter>\n      )}\n    </StyledNodeTemplate>\n  );\n};\n\nexport const StartNode = ({ type, label }: PropsWithoutRef<NodeProps>) => {\n  return (\n    <Flex container={{ justify: 'center', direction: 'column' }}>\n      <StyledLabel nodeType={type}>{label}</StyledLabel>\n      <StyledCircle\n        style={\n          {\n            '--bg-color': colorMap[type.color]\n          } as CSSProperties\n        }\n        tabIndex={0}\n        aria-label={label}\n        role='button'\n      />\n    </Flex>\n  );\n};\n\nexport const EndNode = ({ type, label }: PropsWithoutRef<NodeProps>) => {\n  return (\n    <Flex container={{ justify: 'center', direction: 'column' }}>\n      <StyledCircle\n        style={\n          {\n            '--bg-color': colorMap[type.color]\n          } as CSSProperties\n        }\n        tabIndex={0}\n        aria-label={label}\n        role='button'\n      />\n      <StyledLabel nodeType={type}>{label}</StyledLabel>\n    </Flex>\n  );\n};\n"]}

package/lib/components/MobileBuildSummary/MobileBuildSummary.d.ts

@@ -2,7 +2,6 @@ import { FunctionComponent } from 'react';
 import { ForwardProps } from '@pega/cosmos-react-core';
 import { MobileBuildSummaryProps } from './MobileBuildSummary.types';
 export declare const StyledInteractionTimerIconWrapper: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledQRWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 declare const MobileBuildSummary: FunctionComponent<MobileBuildSummaryProps & ForwardProps>;
 export default MobileBuildSummary;

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

@@ -1 +1 @@
-{"version":3,"file":"MobileBuildSummary.d.ts","sourceRoot":"","sources":["../../../src/components/MobileBuildSummary/MobileBuildSummary.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAA+B,MAAM,OAAO,CAAC;AAGvE,OAAO,EAUL,YAAY,EASb,MAAM,yBAAyB,CAAC;AAKjC,OAAO,EAAE,uBAAuB,EAAE,MAAM,4BAA4B,CAAC;AAIrE,eAAO,MAAM,iCAAiC,0GAG7C,CAAC;AAIF,eAAO,MAAM,eAAe,yGAQ1B,CAAC;AAIH,eAAO,MAAM,aAAa,yGAEzB,CAAC;AAIF,QAAA,MAAM,kBAAkB,EAAE,iBAAiB,CAAC,uBAAuB,GAAG,YAAY,CAoGjF,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"MobileBuildSummary.d.ts","sourceRoot":"","sources":["../../../src/components/MobileBuildSummary/MobileBuildSummary.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAA+B,MAAM,OAAO,CAAC;AAGvE,OAAO,EAUL,YAAY,EAUb,MAAM,yBAAyB,CAAC;AAIjC,OAAO,EAAE,uBAAuB,EAAE,MAAM,4BAA4B,CAAC;AAIrE,eAAO,MAAM,iCAAiC,0GAG7C,CAAC;AAIF,eAAO,MAAM,aAAa,yGAEzB,CAAC;AAIF,QAAA,MAAM,kBAAkB,EAAE,iBAAiB,CAAC,uBAAuB,GAAG,YAAY,CAkGjF,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/lib/components/MobileBuildSummary/MobileBuildSummary.js

@@ -1,26 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { forwardRef } from 'react';
-import styled, { css } from 'styled-components';
-import { Button, Card, CardContent, CardHeader, defaultThemeProp, EmptyState, FieldValueList, Flex, formatNumber, Icon, Link, Progress, registerIcon, Text, useConfiguration, useI18n, useUID } from '@pega/cosmos-react-core';
+import styled from 'styled-components';
+import { Button, Card, CardContent, CardHeader, defaultThemeProp, EmptyState, FieldValueList, Flex, formatNumber, Icon, Link, Progress, QRCode, registerIcon, Text, useConfiguration, useI18n, useUID } from '@pega/cosmos-react-core';
 import * as osAndroid from '@pega/cosmos-react-core/lib/components/Icon/icons/os-android.icon';
 import * as osApple from '@pega/cosmos-react-core/lib/components/Icon/icons/os-apple.icon';
-import * as galaxyIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/galaxy.icon';
-registerIcon(galaxyIcon, osAndroid, osApple);
+registerIcon(osAndroid, osApple);
 export const StyledInteractionTimerIconWrapper = styled.span `
   position: relative;
   min-height: 4rem;
 `;
 StyledInteractionTimerIconWrapper.defaultProps = defaultThemeProp;
-export const StyledQRWrapper = styled.div(({ theme }) => {
-    return css `
-    height: ${theme.base['content-width'].xs};
-    width: ${theme.base['content-width'].xs};
-    border: 0.0625rem solid ${theme.base.palette['border-line']};
-    border-radius: calc(${theme.base['border-radius']} / 2);
-    text-align: center;
-  `;
-});
-StyledQRWrapper.defaultProps = defaultThemeProp;
 export const StyledContent = styled.div `
   min-height: 10rem;
 `;
@@ -32,13 +21,13 @@ const MobileBuildSummary = forwardRef(({ type, progress = undefined, onBuild, bu
     return (_jsxs(Card, { ...restProps, ref: ref, children: [_jsxs(CardHeader, { container: { alignItems: 'center', itemGap: 1 }, children: [_jsx(Icon, { name: type === 'android' ? 'os-android' : 'os-apple' }), _jsx(Text, { variant: 'h3', children: type === 'android' ? 'Android' : 'iOS' })] }), _jsx(CardContent, { children: _jsxs(_Fragment, { children: [progress === undefined && !buildSummary && (_jsxs(Flex, { container: { alignItems: 'center', gap: 1, direction: 'column', justify: 'center' }, as: StyledContent, children: [_jsx(EmptyState, { message: t('no_app_build') }), onBuild && (_jsx(Button, { variant: 'secondary', onClick: onBuild, children: t('build_app') }))] })), progress !== undefined && (_jsxs(Flex, { container: { alignItems: 'center', gap: 1, direction: 'column', justify: 'center' }, as: StyledContent, children: [_jsx(StyledInteractionTimerIconWrapper, { children: _jsx(Progress, { "aria-describedby": progressId, variant: 'ring', placement: 'local', message: formatNumber(progress / 100, {
                                             locale,
                                             options: { style: 'percent' }
-                                        }), value: progress, minValue: 0, maxValue: 100 }) }), _jsx(Text, { variant: 'secondary', id: progressId, children: t('build_in_progress') })] })), buildSummary && !progress && (_jsxs(Flex, { container: { wrap: 'wrap', gap: 2 }, as: StyledContent, children: [_jsxs(Flex, { container: {
+                                        }), value: progress, minValue: 0, maxValue: 100 }) }), _jsx(Text, { variant: 'secondary', id: progressId, children: t('build_in_progress') })] })), buildSummary && !progress && (_jsxs(Flex, { container: { wrap: 'wrap', gap: 2 }, as: StyledContent, children: [_jsx(Flex, { container: {
                                         direction: 'column',
                                         alignItems: 'center',
                                         justify: 'center',
                                         gap: 1,
                                         pad: 2
-                                    }, as: StyledQRWrapper, children: [_jsx(Icon, { name: 'galaxy' }), _jsx(Text, { variant: 'secondary', children: t('qr_code_not_available') })] }), _jsxs(Flex, { container: { direction: 'column', gap: 2 }, children: [_jsx(FieldValueList, { variant: 'inline', fields: buildSummary.summaryFields }), _jsxs(Flex, { container: { wrap: 'wrap', rowGap: 1 }, children: [onBuild && (_jsx(Button, { variant: 'secondary', onClick: onBuild, children: t('rebuild_app') })), _jsx(Link, { href: buildSummary.downloadUrl, variant: 'secondary', onClick: buildSummary.onDownload, children: t('download_app') })] })] })] }))] }) })] }));
+                                    }, children: _jsx(QRCode, { value: buildSummary.qrCodeUrl ?? buildSummary.downloadUrl }) }), _jsxs(Flex, { container: { direction: 'column', gap: 2 }, children: [_jsx(FieldValueList, { variant: 'inline', fields: buildSummary.summaryFields }), _jsxs(Flex, { container: { wrap: 'wrap', rowGap: 1 }, children: [onBuild && (_jsx(Button, { variant: 'secondary', onClick: onBuild, children: t('rebuild_app') })), _jsx(Link, { href: buildSummary.downloadUrl, variant: 'secondary', onClick: buildSummary.onDownload, children: t('download_app') })] })] })] }))] }) })] }));
 });
 export default MobileBuildSummary;
 //# sourceMappingURL=MobileBuildSummary.js.map

package/lib/components/MobileBuildSummary/MobileBuildSummary.js.map

@@ -1 +1 @@
-{"version":3,"file":"MobileBuildSummary.js","sourceRoot":"","sources":["../../../src/components/MobileBuildSummary/MobileBuildSummary.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, forwardRef, PropsWithoutRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Button,\n  Card,\n  CardContent,\n  CardHeader,\n  defaultThemeProp,\n  EmptyState,\n  FieldValueList,\n  Flex,\n  formatNumber,\n  ForwardProps,\n  Icon,\n  Link,\n  Progress,\n  registerIcon,\n  Text,\n  useConfiguration,\n  useI18n,\n  useUID\n} from '@pega/cosmos-react-core';\nimport * as osAndroid from '@pega/cosmos-react-core/lib/components/Icon/icons/os-android.icon';\nimport * as osApple from '@pega/cosmos-react-core/lib/components/Icon/icons/os-apple.icon';\nimport * as galaxyIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/galaxy.icon';\n\nimport { MobileBuildSummaryProps } from './MobileBuildSummary.types';\n\nregisterIcon(galaxyIcon, osAndroid, osApple);\n\nexport const StyledInteractionTimerIconWrapper = styled.span`\n  position: relative;\n  min-height: 4rem;\n`;\n\nStyledInteractionTimerIconWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledQRWrapper = styled.div(({ theme }) => {\n  return css`\n    height: ${theme.base['content-width'].xs};\n    width: ${theme.base['content-width'].xs};\n    border: 0.0625rem solid ${theme.base.palette['border-line']};\n    border-radius: calc(${theme.base['border-radius']} / 2);\n    text-align: center;\n  `;\n});\n\nStyledQRWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledContent = styled.div`\n  min-height: 10rem;\n`;\n\nStyledContent.defaultProps = defaultThemeProp;\n\nconst MobileBuildSummary: FunctionComponent<MobileBuildSummaryProps & ForwardProps> = forwardRef(\n  (\n    {\n      type,\n      progress = undefined,\n      onBuild,\n      buildSummary,\n      ...restProps\n    }: PropsWithoutRef<MobileBuildSummaryProps>,\n    ref: MobileBuildSummaryProps['ref']\n  ) => {\n    const progressId = useUID();\n    const { locale } = useConfiguration();\n    const t = useI18n();\n\n    return (\n      <Card {...restProps} ref={ref}>\n        <CardHeader container={{ alignItems: 'center', itemGap: 1 }}>\n          <Icon name={type === 'android' ? 'os-android' : 'os-apple'} />\n          <Text variant='h3'>{type === 'android' ? 'Android' : 'iOS'}</Text>\n        </CardHeader>\n        <CardContent>\n          <>\n            {progress === undefined && !buildSummary && (\n              <Flex\n                container={{ alignItems: 'center', gap: 1, direction: 'column', justify: 'center' }}\n                as={StyledContent}\n              >\n                <EmptyState message={t('no_app_build')} />\n                {onBuild && (\n                  <Button variant='secondary' onClick={onBuild}>\n                    {t('build_app')}\n                  </Button>\n                )}\n              </Flex>\n            )}\n            {progress !== undefined && (\n              <Flex\n                container={{ alignItems: 'center', gap: 1, direction: 'column', justify: 'center' }}\n                as={StyledContent}\n              >\n                <StyledInteractionTimerIconWrapper>\n                  <Progress\n                    aria-describedby={progressId}\n                    variant='ring'\n                    placement='local'\n                    message={formatNumber(progress / 100, {\n                      locale,\n                      options: { style: 'percent' }\n                    })}\n                    value={progress}\n                    minValue={0}\n                    maxValue={100}\n                  />\n                </StyledInteractionTimerIconWrapper>\n                <Text variant='secondary' id={progressId}>\n                  {t('build_in_progress')}\n                </Text>\n              </Flex>\n            )}\n            {buildSummary && !progress && (\n              <Flex container={{ wrap: 'wrap', gap: 2 }} as={StyledContent}>\n                <Flex\n                  container={{\n                    direction: 'column',\n                    alignItems: 'center',\n                    justify: 'center',\n                    gap: 1,\n                    pad: 2\n                  }}\n                  as={StyledQRWrapper}\n                >\n                  <Icon name='galaxy' />\n                  <Text variant='secondary'>{t('qr_code_not_available')}</Text>\n                </Flex>\n                <Flex container={{ direction: 'column', gap: 2 }}>\n                  <FieldValueList variant='inline' fields={buildSummary.summaryFields} />\n                  <Flex container={{ wrap: 'wrap', rowGap: 1 }}>\n                    {onBuild && (\n                      <Button variant='secondary' onClick={onBuild}>\n                        {t('rebuild_app')}\n                      </Button>\n                    )}\n\n                    <Link\n                      href={buildSummary.downloadUrl}\n                      variant='secondary'\n                      onClick={buildSummary.onDownload}\n                    >\n                      {t('download_app')}\n                    </Link>\n                  </Flex>\n                </Flex>\n              </Flex>\n            )}\n          </>\n        </CardContent>\n      </Card>\n    );\n  }\n);\n\nexport default MobileBuildSummary;\n"]}
+{"version":3,"file":"MobileBuildSummary.js","sourceRoot":"","sources":["../../../src/components/MobileBuildSummary/MobileBuildSummary.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, forwardRef, PropsWithoutRef } from 'react';\nimport styled from 'styled-components';\n\nimport {\n  Button,\n  Card,\n  CardContent,\n  CardHeader,\n  defaultThemeProp,\n  EmptyState,\n  FieldValueList,\n  Flex,\n  formatNumber,\n  ForwardProps,\n  Icon,\n  Link,\n  Progress,\n  QRCode,\n  registerIcon,\n  Text,\n  useConfiguration,\n  useI18n,\n  useUID\n} from '@pega/cosmos-react-core';\nimport * as osAndroid from '@pega/cosmos-react-core/lib/components/Icon/icons/os-android.icon';\nimport * as osApple from '@pega/cosmos-react-core/lib/components/Icon/icons/os-apple.icon';\n\nimport { MobileBuildSummaryProps } from './MobileBuildSummary.types';\n\nregisterIcon(osAndroid, osApple);\n\nexport const StyledInteractionTimerIconWrapper = styled.span`\n  position: relative;\n  min-height: 4rem;\n`;\n\nStyledInteractionTimerIconWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledContent = styled.div`\n  min-height: 10rem;\n`;\n\nStyledContent.defaultProps = defaultThemeProp;\n\nconst MobileBuildSummary: FunctionComponent<MobileBuildSummaryProps & ForwardProps> = forwardRef(\n  (\n    {\n      type,\n      progress = undefined,\n      onBuild,\n      buildSummary,\n      ...restProps\n    }: PropsWithoutRef<MobileBuildSummaryProps>,\n    ref: MobileBuildSummaryProps['ref']\n  ) => {\n    const progressId = useUID();\n    const { locale } = useConfiguration();\n    const t = useI18n();\n\n    return (\n      <Card {...restProps} ref={ref}>\n        <CardHeader container={{ alignItems: 'center', itemGap: 1 }}>\n          <Icon name={type === 'android' ? 'os-android' : 'os-apple'} />\n          <Text variant='h3'>{type === 'android' ? 'Android' : 'iOS'}</Text>\n        </CardHeader>\n        <CardContent>\n          <>\n            {progress === undefined && !buildSummary && (\n              <Flex\n                container={{ alignItems: 'center', gap: 1, direction: 'column', justify: 'center' }}\n                as={StyledContent}\n              >\n                <EmptyState message={t('no_app_build')} />\n                {onBuild && (\n                  <Button variant='secondary' onClick={onBuild}>\n                    {t('build_app')}\n                  </Button>\n                )}\n              </Flex>\n            )}\n            {progress !== undefined && (\n              <Flex\n                container={{ alignItems: 'center', gap: 1, direction: 'column', justify: 'center' }}\n                as={StyledContent}\n              >\n                <StyledInteractionTimerIconWrapper>\n                  <Progress\n                    aria-describedby={progressId}\n                    variant='ring'\n                    placement='local'\n                    message={formatNumber(progress / 100, {\n                      locale,\n                      options: { style: 'percent' }\n                    })}\n                    value={progress}\n                    minValue={0}\n                    maxValue={100}\n                  />\n                </StyledInteractionTimerIconWrapper>\n                <Text variant='secondary' id={progressId}>\n                  {t('build_in_progress')}\n                </Text>\n              </Flex>\n            )}\n            {buildSummary && !progress && (\n              <Flex container={{ wrap: 'wrap', gap: 2 }} as={StyledContent}>\n                <Flex\n                  container={{\n                    direction: 'column',\n                    alignItems: 'center',\n                    justify: 'center',\n                    gap: 1,\n                    pad: 2\n                  }}\n                >\n                  <QRCode value={buildSummary.qrCodeUrl ?? buildSummary.downloadUrl} />\n                </Flex>\n                <Flex container={{ direction: 'column', gap: 2 }}>\n                  <FieldValueList variant='inline' fields={buildSummary.summaryFields} />\n                  <Flex container={{ wrap: 'wrap', rowGap: 1 }}>\n                    {onBuild && (\n                      <Button variant='secondary' onClick={onBuild}>\n                        {t('rebuild_app')}\n                      </Button>\n                    )}\n\n                    <Link\n                      href={buildSummary.downloadUrl}\n                      variant='secondary'\n                      onClick={buildSummary.onDownload}\n                    >\n                      {t('download_app')}\n                    </Link>\n                  </Flex>\n                </Flex>\n              </Flex>\n            )}\n          </>\n        </CardContent>\n      </Card>\n    );\n  }\n);\n\nexport default MobileBuildSummary;\n"]}

package/lib/components/MobileBuildSummary/MobileBuildSummary.types.d.ts

@@ -3,6 +3,8 @@ import { BaseProps, FieldValueListItemProps } from '@pega/cosmos-react-core';
 export interface AppBuildProps {
     /** URL to the application resource. */
     downloadUrl: string;
+    /** QR code url. */
+    qrCodeUrl?: string;
     /** Click handler for the download link. */
     onDownload?: MouseEventHandler<HTMLAnchorElement>;
     /** The set of field values to render in the list. */

package/lib/components/MobileBuildSummary/MobileBuildSummary.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MobileBuildSummary.types.d.ts","sourceRoot":"","sources":["../../../src/components/MobileBuildSummary/MobileBuildSummary.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE/C,OAAO,EAAE,SAAS,EAAE,uBAAuB,EAAE,MAAM,yBAAyB,CAAC;AAE7E,MAAM,WAAW,aAAa;IAC5B,uCAAuC;IACvC,WAAW,EAAE,MAAM,CAAC;IACpB,2CAA2C;IAC3C,UAAU,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IAClD,qDAAqD;IACrD,aAAa,EAAE,uBAAuB,EAAE,CAAC;CAC1C;AAED,MAAM,WAAW,uBAAwB,SAAQ,SAAS;IACxD,yDAAyD;IACzD,IAAI,EAAE,SAAS,GAAG,KAAK,CAAC;IACxB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,2CAA2C;IAC3C,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,0BAA0B;IAC1B,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B"}
+{"version":3,"file":"MobileBuildSummary.types.d.ts","sourceRoot":"","sources":["../../../src/components/MobileBuildSummary/MobileBuildSummary.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE/C,OAAO,EAAE,SAAS,EAAE,uBAAuB,EAAE,MAAM,yBAAyB,CAAC;AAE7E,MAAM,WAAW,aAAa;IAC5B,uCAAuC;IACvC,WAAW,EAAE,MAAM,CAAC;IACpB,mBAAmB;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2CAA2C;IAC3C,UAAU,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IAClD,qDAAqD;IACrD,aAAa,EAAE,uBAAuB,EAAE,CAAC;CAC1C;AAED,MAAM,WAAW,uBAAwB,SAAQ,SAAS;IACxD,yDAAyD;IACzD,IAAI,EAAE,SAAS,GAAG,KAAK,CAAC;IACxB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,2CAA2C;IAC3C,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,0BAA0B;IAC1B,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B"}