@pega/cosmos-react-build 2.0.0-dev.17.0 → 2.0.0-dev.21.0

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

@@ -1,3 +1,5 @@
 export { OneColumnPage } from './PageTemplates';
 export { TabbedPage } from './PageTemplates';
+export { default as GalleryPage } from './GalleryPage';
+export { GalleryPageProps } from './GalleryPage';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/PageTemplates/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/PageTemplates/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC"}

package/lib/components/PageTemplates/index.js

@@ -1,3 +1,4 @@
 export { OneColumnPage } from './PageTemplates';
 export { TabbedPage } from './PageTemplates';
+export { default as GalleryPage } from './GalleryPage';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/PageTemplates/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC","sourcesContent":["export { OneColumnPage } from './PageTemplates';\nexport { TabbedPage } from './PageTemplates';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/PageTemplates/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC","sourcesContent":["export { OneColumnPage } from './PageTemplates';\nexport { TabbedPage } from './PageTemplates';\nexport { default as GalleryPage } from './GalleryPage';\nexport { GalleryPageProps } from './GalleryPage';\n"]}

package/lib/components/SummaryCard/SummaryCard.d.ts

@@ -0,0 +1,16 @@
+import { FC, MouseEvent } from 'react';
+import { Text, Card, MetaListProps } from '@pega/cosmos-react-core';
+import { VisualProps } from '../Visual';
+export interface SummaryCardProps {
+    id: string;
+    title: string;
+    description?: string;
+    onClick?: (id: string, e: MouseEvent<HTMLDivElement>) => void;
+    meta: MetaListProps['items'];
+    visual?: VisualProps;
+}
+export declare const StyledTitle: typeof Text;
+export declare const StyledSummaryCard: typeof Card;
+declare const SummaryCard: FC<SummaryCardProps>;
+export default SummaryCard;
+//# sourceMappingURL=SummaryCard.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SummaryCard.d.ts","sourceRoot":"","sources":["../../../src/components/SummaryCard/SummaryCard.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,EACL,IAAI,EAGJ,IAAI,EAEJ,aAAa,EACd,MAAM,yBAAyB,CAAC;AAIjC,OAAe,EAAE,WAAW,EAAyB,MAAM,WAAW,CAAC;AAEvE,MAAM,WAAW,gBAAgB;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,UAAU,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAC9D,IAAI,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,WAAW,CAAC;CACtB;AAED,eAAO,MAAM,WAAW,EAAE,OAAO,IAIhC,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,OAAO,IAarC,CAAC;AAIH,QAAA,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CAkBrC,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/components/SummaryCard/SummaryCard.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled, { css } from 'styled-components';
+import { Text, Flex, MetaList, Card, defaultThemeProp } from '@pega/cosmos-react-core';
+import BareRoleButton from '@pega/cosmos-react-core/lib/components/Button/BareRoleButton';
+import { StyledDescription } from '../PageTemplates/GalleryPage.styles';
+import Visual, { StyledVisualContainer } from '../Visual';
+export const StyledTitle = styled(Text) `
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+export const StyledSummaryCard = styled(Card)(({ theme }) => {
+    return css `
+    padding: calc(2 * ${theme.base.spacing});
+    &:hover,
+    &:focus {
+      cursor: pointer;
+      box-shadow: ${theme.base.shadow.focus};
+    }
+
+    ${StyledVisualContainer} {
+      flex-shrink: 0;
+    }
+  `;
+});
+StyledSummaryCard.defaultProps = defaultThemeProp;
+const SummaryCard = ({ id, title, description, visual, meta, onClick }) => {
+    return (_jsxs(BareRoleButton, { container: { direction: 'column', rowGap: 2, justify: 'between' }, as: StyledSummaryCard, onClick: (e) => onClick?.(id, e), children: [_jsxs(Flex, { container: { alignItems: 'center', colGap: 1 }, children: [visual && _jsx(Visual, { ...visual }, void 0), _jsx(StyledTitle, { variant: 'h3', children: title }, void 0)] }, void 0), _jsx(Flex, { item: { grow: 1 }, children: _jsx(StyledDescription, { children: description }, void 0) }, void 0), _jsx(MetaList, { items: meta, wrapItems: false }, void 0)] }, id));
+};
+export default SummaryCard;
+//# sourceMappingURL=SummaryCard.js.map

package/lib/components/SummaryCard/SummaryCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SummaryCard.js","sourceRoot":"","sources":["../../../src/components/SummaryCard/SummaryCard.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,IAAI,EACJ,gBAAgB,EAEjB,MAAM,yBAAyB,CAAC;AACjC,OAAO,cAAc,MAAM,8DAA8D,CAAC;AAE1F,OAAO,EAAE,iBAAiB,EAAE,MAAM,qCAAqC,CAAC;AACxE,OAAO,MAAM,EAAE,EAAe,qBAAqB,EAAE,MAAM,WAAW,CAAC;AAWvE,MAAM,CAAC,MAAM,WAAW,GAAgB,MAAM,CAAC,IAAI,CAAC,CAAA;;;;CAInD,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAgB,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACvE,OAAO,GAAG,CAAA;wBACY,KAAK,CAAC,IAAI,CAAC,OAAO;;;;oBAItB,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;;;MAGrC,qBAAqB;;;GAGxB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,MAAM,WAAW,GAAyB,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE;IAC9F,OAAO,CACL,MAAC,cAAc,IACb,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,EACjE,EAAE,EAAE,iBAAiB,EAErB,OAAO,EAAE,CAAC,CAA6B,EAAE,EAAE,CAAC,OAAO,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,aAE5D,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAC,EAAE,aACjD,MAAM,IAAI,KAAC,MAAM,OAAK,MAAM,WAAI,EACjC,KAAC,WAAW,IAAC,OAAO,EAAC,IAAI,YAAE,KAAK,WAAe,YAC1C,EACP,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,YACrB,KAAC,iBAAiB,cAAE,WAAW,WAAqB,WAC/C,EACP,KAAC,QAAQ,IAAC,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,WAAI,KAVtC,EAAE,CAWQ,CAClB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { FC, MouseEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Text,\n  Flex,\n  MetaList,\n  Card,\n  defaultThemeProp,\n  MetaListProps\n} from '@pega/cosmos-react-core';\nimport BareRoleButton from '@pega/cosmos-react-core/lib/components/Button/BareRoleButton';\n\nimport { StyledDescription } from '../PageTemplates/GalleryPage.styles';\nimport Visual, { VisualProps, StyledVisualContainer } from '../Visual';\n\nexport interface SummaryCardProps {\n  id: string;\n  title: string;\n  description?: string;\n  onClick?: (id: string, e: MouseEvent<HTMLDivElement>) => void;\n  meta: MetaListProps['items'];\n  visual?: VisualProps;\n}\n\nexport const StyledTitle: typeof Text = styled(Text)`\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n`;\n\nexport const StyledSummaryCard: typeof Card = styled(Card)(({ theme }) => {\n  return css`\n    padding: calc(2 * ${theme.base.spacing});\n    &:hover,\n    &:focus {\n      cursor: pointer;\n      box-shadow: ${theme.base.shadow.focus};\n    }\n\n    ${StyledVisualContainer} {\n      flex-shrink: 0;\n    }\n  `;\n});\n\nStyledSummaryCard.defaultProps = defaultThemeProp;\n\nconst SummaryCard: FC<SummaryCardProps> = ({ id, title, description, visual, meta, onClick }) => {\n  return (\n    <BareRoleButton\n      container={{ direction: 'column', rowGap: 2, justify: 'between' }}\n      as={StyledSummaryCard}\n      key={id}\n      onClick={(e: MouseEvent<HTMLDivElement>) => onClick?.(id, e)}\n    >\n      <Flex container={{ alignItems: 'center', colGap: 1 }}>\n        {visual && <Visual {...visual} />}\n        <StyledTitle variant='h3'>{title}</StyledTitle>\n      </Flex>\n      <Flex item={{ grow: 1 }}>\n        <StyledDescription>{description}</StyledDescription>\n      </Flex>\n      <MetaList items={meta} wrapItems={false} />\n    </BareRoleButton>\n  );\n};\n\nexport default SummaryCard;\n"]}

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

@@ -0,0 +1,3 @@
+export { default } from './SummaryCard';
+export * from './SummaryCard';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SummaryCard/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,cAAc,eAAe,CAAC"}

package/lib/components/SummaryCard/index.js

@@ -0,0 +1,3 @@
+export { default } from './SummaryCard';
+export * from './SummaryCard';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/SummaryCard/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,cAAc,eAAe,CAAC","sourcesContent":["export { default } from './SummaryCard';\nexport * from './SummaryCard';\n"]}

package/lib/components/Visual/Visual.d.ts

@@ -0,0 +1,17 @@
+import { FC } from 'react';
+import { ImageProps, IconProps, RequiredByKey } from '@pega/cosmos-react-core';
+interface IconWithColor extends IconProps {
+    bgColor?: string;
+    color?: string;
+}
+interface VisualPropsInterface {
+    /** displays the image */
+    image?: ImageProps;
+    /** displays icon if image is not available */
+    icon?: IconWithColor;
+}
+export declare type VisualProps = RequiredByKey<VisualPropsInterface, 'icon'> | RequiredByKey<VisualPropsInterface, 'image'>;
+export declare const StyledVisualContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+declare const Visual: FC<VisualProps>;
+export default Visual;
+//# sourceMappingURL=Visual.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Visual.d.ts","sourceRoot":"","sources":["../../../src/components/Visual/Visual.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,EAAE,EAAE,MAAM,OAAO,CAAC;AAI1C,OAAO,EAEL,UAAU,EACV,SAAS,EAMT,aAAa,EACd,MAAM,yBAAyB,CAAC;AAEjC,UAAU,aAAc,SAAQ,SAAS;IACvC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,UAAU,oBAAoB;IAE5B,yBAAyB;IACzB,KAAK,CAAC,EAAE,UAAU,CAAC;IAEnB,8CAA8C;IAC9C,IAAI,CAAC,EAAE,aAAa,CAAC;CACtB;AAED,oBAAY,WAAW,GACnB,aAAa,CAAC,oBAAoB,EAAE,MAAM,CAAC,GAC3C,aAAa,CAAC,oBAAoB,EAAE,OAAO,CAAC,CAAC;AAEjD,eAAO,MAAM,qBAAqB,yGAWhC,CAAC;AAIH,QAAA,MAAM,MAAM,EAAE,EAAE,CAAC,WAAW,CAmB3B,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/lib/components/Visual/Visual.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled, { css } from 'styled-components';
+import { readableColor } from 'polished';
+import { Image, Icon, Flex, useTheme, StyledIcon, defaultThemeProp } from '@pega/cosmos-react-core';
+export const StyledVisualContainer = styled.div(({ theme }) => {
+    return css `
+    width: 2rem;
+    height: 2rem;
+    border-radius: ${theme.base['border-radius']};
+    background-color: var(--bg-color);
+    color: var(--fg-color);
+    ${StyledIcon} {
+      color: var(--fg-color);
+    }
+  `;
+});
+StyledVisualContainer.defaultProps = defaultThemeProp;
+const Visual = ({ image, icon }) => {
+    const theme = useTheme();
+    const color = (icon && icon.color) || theme.base.colors.white;
+    const bgColor = (icon && icon.bgColor) || readableColor(color);
+    return (_jsxs(Flex, { as: StyledVisualContainer, container: { justify: 'center', alignItems: 'center' }, style: {
+            '--bg-color': bgColor,
+            '--fg-color': color
+        }, children: [image && image.src && _jsx(Image, { src: image.src, alt: image.alt }, void 0), icon && icon.name && _jsx(Icon, { name: icon.name }, void 0)] }, void 0));
+};
+export default Visual;
+//# sourceMappingURL=Visual.js.map

package/lib/components/Visual/Visual.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Visual.js","sourceRoot":"","sources":["../../../src/components/Visual/Visual.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAEzC,OAAO,EACL,KAAK,EAGL,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,UAAU,EACV,gBAAgB,EAEjB,MAAM,yBAAyB,CAAC;AAoBjC,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC5D,OAAO,GAAG,CAAA;;;qBAGS,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;;;MAG1C,UAAU;;;GAGb,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,qBAAqB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEtD,MAAM,MAAM,GAAoB,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;IAClD,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,KAAK,GAAG,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC;IAC9D,MAAM,OAAO,GAAG,CAAC,IAAI,IAAI,IAAI,CAAC,OAAO,CAAC,IAAI,aAAa,CAAC,KAAK,CAAC,CAAC;IAC/D,OAAO,CACL,MAAC,IAAI,IACH,EAAE,EAAE,qBAAqB,EACzB,SAAS,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,EACtD,KAAK,EACH;YACE,YAAY,EAAE,OAAO;YACrB,YAAY,EAAE,KAAK;SACH,aAGnB,KAAK,IAAI,KAAK,CAAC,GAAG,IAAI,KAAC,KAAK,IAAC,GAAG,EAAE,KAAK,CAAC,GAAG,EAAE,GAAG,EAAE,KAAK,CAAC,GAAG,WAAI,EAC/D,IAAI,IAAI,IAAI,CAAC,IAAI,IAAI,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,CAAC,IAAI,WAAI,YAC1C,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,MAAM,CAAC","sourcesContent":["import { CSSProperties, FC } from 'react';\nimport styled, { css } from 'styled-components';\nimport { readableColor } from 'polished';\n\nimport {\n  Image,\n  ImageProps,\n  IconProps,\n  Icon,\n  Flex,\n  useTheme,\n  StyledIcon,\n  defaultThemeProp,\n  RequiredByKey\n} from '@pega/cosmos-react-core';\n\ninterface IconWithColor extends IconProps {\n  bgColor?: string;\n  color?: string;\n}\n\ninterface VisualPropsInterface {\n  // visual: ImageProps | (IconProps & { color?: string; bgColor?: string });\n  /** displays the image */\n  image?: ImageProps;\n\n  /** displays icon if image is not available */\n  icon?: IconWithColor;\n}\n\nexport type VisualProps =\n  | RequiredByKey<VisualPropsInterface, 'icon'>\n  | RequiredByKey<VisualPropsInterface, 'image'>;\n\nexport const StyledVisualContainer = styled.div(({ theme }) => {\n  return css`\n    width: 2rem;\n    height: 2rem;\n    border-radius: ${theme.base['border-radius']};\n    background-color: var(--bg-color);\n    color: var(--fg-color);\n    ${StyledIcon} {\n      color: var(--fg-color);\n    }\n  `;\n});\n\nStyledVisualContainer.defaultProps = defaultThemeProp;\n\nconst Visual: FC<VisualProps> = ({ image, icon }) => {\n  const theme = useTheme();\n  const color = (icon && icon.color) || theme.base.colors.white;\n  const bgColor = (icon && icon.bgColor) || readableColor(color);\n  return (\n    <Flex\n      as={StyledVisualContainer}\n      container={{ justify: 'center', alignItems: 'center' }}\n      style={\n        {\n          '--bg-color': bgColor,\n          '--fg-color': color\n        } as CSSProperties\n      }\n    >\n      {image && image.src && <Image src={image.src} alt={image.alt} />}\n      {icon && icon.name && <Icon name={icon.name} />}\n    </Flex>\n  );\n};\n\nexport default Visual;\n"]}

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

@@ -0,0 +1,3 @@
+export { default } from './Visual';
+export * from './Visual';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Visual/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AACnC,cAAc,UAAU,CAAC"}

package/lib/components/Visual/index.js

@@ -0,0 +1,3 @@
+export { default } from './Visual';
+export * from './Visual';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Visual/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AACnC,cAAc,UAAU,CAAC","sourcesContent":["export { default } from './Visual';\nexport * from './Visual';\n"]}

package/lib/index.d.ts

@@ -7,4 +7,6 @@ export * from './components/FlowModeller';
 export { default as LifeCycle } from './components/LifeCycle';
 export * from './components/LifeCycle';
 export * from './components/PageTemplates';
+export * from './components/SummaryCard';
+export * from './components/Visual';
 //# sourceMappingURL=index.d.ts.map

package/lib/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,cAAc,wBAAwB,CAAC;AACvC,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,cAAc,uBAAuB,CAAC;AACtC,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACpE,cAAc,2BAA2B,CAAC;AAC1C,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,cAAc,wBAAwB,CAAC;AACvC,cAAc,4BAA4B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,cAAc,wBAAwB,CAAC;AACvC,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,cAAc,uBAAuB,CAAC;AACtC,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACpE,cAAc,2BAA2B,CAAC;AAC1C,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,cAAc,wBAAwB,CAAC;AACvC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,qBAAqB,CAAC"}

package/lib/index.js

@@ -8,4 +8,6 @@ export * from './components/FlowModeller';
 export { default as LifeCycle } from './components/LifeCycle';
 export * from './components/LifeCycle';
 export * from './components/PageTemplates';
+export * from './components/SummaryCard';
+export * from './components/Visual';
 //# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,+DAA+D;AAC/D,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,cAAc,wBAAwB,CAAC;AACvC,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,cAAc,uBAAuB,CAAC;AACtC,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACpE,cAAc,2BAA2B,CAAC;AAC1C,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,cAAc,wBAAwB,CAAC;AACvC,cAAc,4BAA4B,CAAC","sourcesContent":["// This file is autogenerated. Any changes will be overwritten.\nexport { default as AppHeader } from './components/AppHeader';\nexport * from './components/AppHeader';\nexport { default as AppShell } from './components/AppShell';\nexport * from './components/AppShell';\nexport { default as FlowModeller } from './components/FlowModeller';\nexport * from './components/FlowModeller';\nexport { default as LifeCycle } from './components/LifeCycle';\nexport * from './components/LifeCycle';\nexport * from './components/PageTemplates';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,+DAA+D;AAC/D,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,cAAc,wBAAwB,CAAC;AACvC,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,cAAc,uBAAuB,CAAC;AACtC,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACpE,cAAc,2BAA2B,CAAC;AAC1C,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,cAAc,wBAAwB,CAAC;AACvC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,qBAAqB,CAAC","sourcesContent":["// This file is autogenerated. Any changes will be overwritten.\nexport { default as AppHeader } from './components/AppHeader';\nexport * from './components/AppHeader';\nexport { default as AppShell } from './components/AppShell';\nexport * from './components/AppShell';\nexport { default as FlowModeller } from './components/FlowModeller';\nexport * from './components/FlowModeller';\nexport { default as LifeCycle } from './components/LifeCycle';\nexport * from './components/LifeCycle';\nexport * from './components/PageTemplates';\nexport * from './components/SummaryCard';\nexport * from './components/Visual';\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/cosmos-react-build",
-  "version": "2.0.0-dev.17.0",
+  "version": "2.0.0-dev.21.0",
   "author": "Pegasystems",
   "license": "SEE LICENSE IN LICENSE",
   "repository": {
@@ -20,8 +20,9 @@
     "build": "tsc -b"
   },
   "dependencies": {
-    "@pega/cosmos-react-core": "2.0.0-dev.17.0",
-    "@pega/cosmos-react-dnd": "2.0.0-dev.17.0",
+    "@pega/cosmos-react-core": "2.0.0-dev.21.0",
+    "@pega/cosmos-react-dnd": "2.0.0-dev.21.0",
+    "dagre": "^0.8.5",
     "polished": "^4.1.0",
     "react": "^16.14.0 || ^17.0.0",
     "react-dom": "^16.14.0 || ^17.0.0",
@@ -39,6 +40,6 @@
     "@storybook/testing-react": "0.0.18",
     "@storybook/theming": "^6.3.8",
     "enzyme": "^3.11.0",
-    "typescript": "~4.4.2"
+    "typescript": "~4.5.2"
   }
 }

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

@@ -1,30 +0,0 @@
-import { FunctionComponent, Ref } from 'react';
-import { ForwardProps } from '@pega/cosmos-react-core';
-export interface ConnectorProps {
-    /** Unique id of connector */
-    id: string;
-    /** Label for connector if there */
-    label?: string;
-    /** Node id which connector should connect to */
-    targetNodeId?: string;
-    /** Callback for adding the nodes */
-    onAddClick?: () => void;
-    /** Ref of the connector */
-    ref?: Ref<HTMLButtonElement>;
-    /** Boolean if the button on the connector is active */
-    active?: boolean;
-}
-export declare const StyledWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
-    withLabel: boolean;
-}, never>;
-export declare const StyledConnector: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledButtonWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledDot: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledButton: import("styled-components").StyledComponent<FunctionComponent<import("@pega/cosmos-react-core").ButtonProps & ForwardProps>, import("styled-components").DefaultTheme, {
-    active: ConnectorProps;
-}, never>;
-export declare const StyledLabelWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledLabel: import("styled-components").StyledComponent<FunctionComponent<import("@pega/cosmos-react-core").LabelProps & ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
-declare const Connector: FunctionComponent<ConnectorProps & ForwardProps>;
-export default Connector;
-//# sourceMappingURL=Connector.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Connector.d.ts","sourceRoot":"","sources":["../../../src/components/FlowModeller/Connector.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAG5E,OAAO,EAIL,YAAY,EAOb,MAAM,yBAAyB,CAAC;AAEjC,MAAM,WAAW,cAAc;IAC7B,6BAA6B;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,mCAAmC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gDAAgD;IAChD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oCAAoC;IACpC,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,2BAA2B;IAC3B,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAC;IAC7B,uDAAuD;IACvD,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,eAAO,MAAM,aAAa;eAA2B,OAAO;SAY1D,CAAC;AAIH,eAAO,MAAM,eAAe,yGAO3B,CAAC;AAIF,eAAO,MAAM,mBAAmB,yGAM/B,CAAC;AAIF,eAAO,MAAM,SAAS,yGAMpB,CAAC;AAIH,eAAO,MAAM,YAAY;YAA4B,cAAc;SAmBjE,CAAC;AAIH,eAAO,MAAM,kBAAkB,yGAG9B,CAAC;AAIF,eAAO,MAAM,WAAW,kLAStB,CAAC;AAIH,QAAA,MAAM,SAAS,EAAE,iBAAiB,CAAC,cAAc,GAAG,YAAY,CA8C/D,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/lib/components/FlowModeller/Connector.js

@@ -1,89 +0,0 @@
-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, defaultThemeProp, Flex, Icon, Label, useConsolidatedRef, useElement, useI18n, useTheme } from '@pega/cosmos-react-core';
-export const StyledWrapper = styled.div(({ withLabel }) => {
-    return css `
-    width: 17.5rem;
-    ${withLabel
-        ? css `
-          height: 6rem;
-        `
-        : css `
-          height: 4.5rem;
-        `}
-    align-self: center;
-  `;
-});
-StyledWrapper.defaultProps = defaultThemeProp;
-export const StyledConnector = styled.div `
-  width: 2rem;
-  align-self: center;
-  height: 100%;
-  svg {
-    width: 100%;
-  }
-`;
-StyledConnector.defaultProps = defaultThemeProp;
-export const StyledButtonWrapper = styled.div `
-  height: 0;
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  position: relative;
-`;
-StyledButtonWrapper.defaultProps = defaultThemeProp;
-export const StyledDot = styled.div(({ theme }) => {
-    return css `
-    top: -3rem;
-    position: absolute;
-    color: ${theme.base.colors.slate.medium};
-  `;
-});
-StyledDot.defaultProps = defaultThemeProp;
-export const StyledButton = styled(Button)(({ theme, active }) => {
-    return css `
-    opacity: 0;
-    top: -3.25rem;
-    border: 0;
-    color: ${theme.base.colors.black};
-    background: ${theme.base.colors.white};
-    ${active &&
-        css `
-      box-shadow: 0 0 0.2rem 0.0625rem ${theme.base.colors.blue.medium};
-      opacity: 1;
-    `}
-    &:hover,
-    &:active,
-    &:focus {
-      opacity: 1;
-      background: ${theme.base.colors.white};
-    }
-  `;
-});
-StyledButton.defaultProps = defaultThemeProp;
-export const StyledLabelWrapper = styled.div `
-  position: relative;
-  width: 100%;
-`;
-StyledLabelWrapper.defaultProps = defaultThemeProp;
-export const StyledLabel = styled(Label)(({ theme }) => {
-    return css `
-    padding: calc(0.5 * ${theme.base.spacing});
-    border-radius: 0.25rem;
-    position: absolute;
-    bottom: -2.25rem;
-    background: ${theme.base.colors.slate.medium};
-    color: ${theme.base.colors.white};
-  `;
-});
-StyledLabel.defaultProps = defaultThemeProp;
-const Connector = forwardRef(({ label, onAddClick, active = false }, ref) => {
-    const theme = useTheme();
-    const t = useI18n();
-    const [, setButtonEl] = useElement();
-    const buttonRef = useConsolidatedRef(ref, setButtonEl);
-    return (_jsx(_Fragment, { children: _jsxs(Flex, Object.assign({ as: StyledWrapper, withLabel: !!label, container: { alignItems: 'center', direction: 'column' } }, { children: [label && (_jsx(Flex, Object.assign({ as: StyledLabelWrapper, container: { justify: 'center' } }, { children: _jsx(StyledLabel, { children: label }, void 0) }), void 0)), _jsx(Flex, Object.assign({ "aria-disabled": 'true', as: StyledConnector }, { children: _jsx("svg", { children: _jsx("path", { strokeWidth: '2', stroke: theme.base.colors.slate.light, d: 'M 16 0 v100' }, void 0) }, void 0) }), void 0), _jsxs(Flex, Object.assign({ as: StyledButtonWrapper }, { children: [_jsx(StyledDot, { children: _jsx(Icon, { name: 'circle-solid' }, void 0) }, void 0), _jsx(StyledButton, Object.assign({ label: t('add_noun', [t('node').toLowerCase()]), active: active, icon: true, onClick: onAddClick, ref: buttonRef }, { children: _jsx(Icon, { name: 'plus' }, void 0) }), void 0)] }), void 0)] }), void 0) }, void 0));
-});
-export default Connector;
-//# sourceMappingURL=Connector.js.map

package/lib/components/FlowModeller/Connector.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Connector.js","sourceRoot":"","sources":["../../../src/components/FlowModeller/Connector.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Button,\n  defaultThemeProp,\n  Flex,\n  ForwardProps,\n  Icon,\n  Label,\n  useConsolidatedRef,\n  useElement,\n  useI18n,\n  useTheme\n} from '@pega/cosmos-react-core';\n\nexport interface ConnectorProps {\n  /** Unique id of connector */\n  id: string;\n  /** Label for connector if there */\n  label?: string;\n  /** Node id which connector should connect to */\n  targetNodeId?: string;\n  /** Callback for adding the nodes */\n  onAddClick?: () => void;\n  /** Ref of the connector */\n  ref?: Ref<HTMLButtonElement>;\n  /** Boolean if the button on the connector is active */\n  active?: boolean;\n}\n\nexport const StyledWrapper = styled.div<{ withLabel: boolean }>(({ withLabel }) => {\n  return css`\n    width: 17.5rem;\n    ${withLabel\n      ? css`\n          height: 6rem;\n        `\n      : css`\n          height: 4.5rem;\n        `}\n    align-self: center;\n  `;\n});\n\nStyledWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledConnector = styled.div`\n  width: 2rem;\n  align-self: center;\n  height: 100%;\n  svg {\n    width: 100%;\n  }\n`;\n\nStyledConnector.defaultProps = defaultThemeProp;\n\nexport const StyledButtonWrapper = styled.div`\n  height: 0;\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  position: relative;\n`;\n\nStyledButtonWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledDot = styled.div(({ theme }) => {\n  return css`\n    top: -3rem;\n    position: absolute;\n    color: ${theme.base.colors.slate.medium};\n  `;\n});\n\nStyledDot.defaultProps = defaultThemeProp;\n\nexport const StyledButton = styled(Button)<{ active: ConnectorProps }>(({ theme, active }) => {\n  return css`\n    opacity: 0;\n    top: -3.25rem;\n    border: 0;\n    color: ${theme.base.colors.black};\n    background: ${theme.base.colors.white};\n    ${active &&\n    css`\n      box-shadow: 0 0 0.2rem 0.0625rem ${theme.base.colors.blue.medium};\n      opacity: 1;\n    `}\n    &:hover,\n    &:active,\n    &:focus {\n      opacity: 1;\n      background: ${theme.base.colors.white};\n    }\n  `;\n});\n\nStyledButton.defaultProps = defaultThemeProp;\n\nexport const StyledLabelWrapper = styled.div`\n  position: relative;\n  width: 100%;\n`;\n\nStyledLabelWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledLabel = styled(Label)(({ theme }) => {\n  return css`\n    padding: calc(0.5 * ${theme.base.spacing});\n    border-radius: 0.25rem;\n    position: absolute;\n    bottom: -2.25rem;\n    background: ${theme.base.colors.slate.medium};\n    color: ${theme.base.colors.white};\n  `;\n});\n\nStyledLabel.defaultProps = defaultThemeProp;\n\nconst Connector: FunctionComponent<ConnectorProps & ForwardProps> = forwardRef(\n  (\n    { label, onAddClick, active = false }: PropsWithoutRef<ConnectorProps>,\n    ref: ConnectorProps['ref']\n  ) => {\n    const theme = useTheme();\n    const t = useI18n();\n    const [, setButtonEl] = useElement<HTMLButtonElement>();\n    const buttonRef = useConsolidatedRef(ref, setButtonEl);\n\n    return (\n      <>\n        <Flex\n          as={StyledWrapper}\n          withLabel={!!label}\n          container={{ alignItems: 'center', direction: 'column' }}\n        >\n          {label && (\n            <Flex as={StyledLabelWrapper} container={{ justify: 'center' }}>\n              <StyledLabel>{label}</StyledLabel>\n            </Flex>\n          )}\n          <Flex aria-disabled='true' as={StyledConnector}>\n            <svg>\n              <path strokeWidth='2' stroke={theme.base.colors.slate.light} d='M 16 0 v100' />\n            </svg>\n          </Flex>\n\n          <Flex as={StyledButtonWrapper}>\n            <StyledDot>\n              <Icon name='circle-solid' />\n            </StyledDot>\n            <StyledButton\n              label={t('add_noun', [t('node').toLowerCase()])}\n              active={active}\n              icon\n              onClick={onAddClick}\n              ref={buttonRef}\n            >\n              <Icon name='plus' />\n            </StyledButton>\n          </Flex>\n        </Flex>\n      </>\n    );\n  }\n);\n\nexport default Connector;\n"]}