@pega/cosmos-react-build 2.1.6 → 2.1.7

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

@@ -0,0 +1 @@
+{"version":3,"file":"GalleryPage.js","sourceRoot":"","sources":["../../../src/components/PageTemplates/GalleryPage.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAuB,UAAU,EAAmB,MAAM,OAAO,CAAC;AAEzE,OAAO,EAEL,KAAK,EAEL,IAAI,EACJ,IAAI,EACJ,MAAM,EAEP,MAAM,yBAAyB,CAAC;AAEjC,OAAO,WAAiC,MAAM,gBAAgB,CAAC;AAE/D,OAAO,EACL,iBAAiB,EACjB,aAAa,EACb,qBAAqB,EACrB,YAAY,EACZ,oBAAoB,EACpB,iBAAiB,EACjB,gBAAgB,EACjB,MAAM,sBAAsB,CAAC;AAqB9B,MAAM,MAAM,GAA+E,CAAC,EAC1F,OAAO,EACP,WAAW,EACX,KAAK,EACL,MAAM,EACP,EAAE,EAAE;IACH,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,EAAE,EAAE,YAAY,aAC7E,MAAC,IAAI,IAAC,EAAE,EAAE,gBAAgB,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,aAC3C,KAAC,aAAa,IAAC,OAAO,EAAC,IAAI,YAAE,OAAO,WAAiB,EACpD,WAAW,IAAI,KAAC,iBAAiB,cAAE,WAAW,WAAqB,EACnE,MAAM,IAAI,CACT,KAAC,MAAM,IAAC,OAAO,EAAE,CAAC,CAAgC,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,YACrE,MAAM,CAAC,IAAI,WACL,CACV,YACI,EACN,KAAK,IAAI,CACR,KAAC,oBAAoB,cACnB,KAAC,KAAK,OAAK,KAAK,WAAI,WACC,CACxB,YACI,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,eAAe,GAGhB,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,EAAE,EAAE;IAC9B,OAAO,CACL,KAAC,IAAI,IACH,SAAS,EAAE;YACT,IAAI,EAAE,0CAA0C;YAChD,QAAQ,EAAE,OAAO;YACjB,GAAG,EAAE,CAAC;SACP,EACD,EAAE,EAAE,qBAAqB,YAExB,KAAK,IAAI,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,KAAC,WAAW,OAAmB,IAAI,EAAE,OAAO,EAAE,WAAW,IAAvC,IAAI,CAAC,EAAE,CAAoC,CAAC,WACrF,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,UAAU,GAA2D,CAAC,EAC1E,OAAO,EACP,WAAW,EACX,MAAM,EACP,EAAE,EAAE;IACH,OAAO,CACL,MAAC,IAAI,IACH,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAC,EAAE,EACtF,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,aAEjB,KAAC,aAAa,IAAC,OAAO,EAAC,IAAI,YAAE,OAAO,WAAiB,EACpD,WAAW,IAAI,KAAC,iBAAiB,cAAE,WAAW,WAAqB,EACnE,MAAM,IAAI,CACT,KAAC,MAAM,IAAC,OAAO,EAAC,SAAS,EAAC,OAAO,EAAE,MAAM,CAAC,OAAO,YAC9C,MAAM,CAAC,IAAI,WACL,CACV,YACI,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,WAAW,GAAwC,UAAU,CACjE,CACE,EACE,OAAO,EACP,WAAW,EACX,KAAK,EACL,KAAK,EACL,WAAW,EACX,UAAU,EACV,MAAM,EAC4B,EACpC,GAA4B,EAC5B,EAAE;IACF,OAAO,CACL,KAAC,iBAAiB,IAChB,KAAK,EAAC,EAAE,EACR,GAAG,EAAE,GAAG,EACR,MAAM,EACJ,KAAC,MAAM,IAAC,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,WAAI,EAEtF,CAAC,EACC,KAAK,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAC1B,KAAC,eAAe,IAAC,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,WAAW,WAAI,CAC5D,CAAC,CAAC,CAAC,CACF,KAAC,UAAU,OAAK,UAAU,EAAE,MAAM,EAAE,MAAM,WAAI,CAC/C,EAEH,aAAa,iBACb,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { FC, PropsWithoutRef, forwardRef, Ref, MouseEvent } from 'react';\n\nimport {\n  ForwardProps,\n  Image,\n  ImageProps,\n  Flex,\n  Grid,\n  Button,\n  NoChildrenProp\n} from '@pega/cosmos-react-core';\n\nimport SummaryCard, { SummaryCardProps } from '../SummaryCard';\n\nimport {\n  StyledDescription,\n  StyledHeading,\n  StyledSummaryCardList,\n  StyledBanner,\n  StyledImageContainer,\n  StyledGalleryPage,\n  StyledBannerInfo\n} from './GalleryPage.styles';\n\ninterface EmptyStateProps {\n  heading: string;\n  description?: string;\n}\n\nexport interface GalleryPageProps extends NoChildrenProp {\n  heading: string;\n  description?: string;\n  image?: ImageProps;\n  action: {\n    text: string;\n    onClick: (e: MouseEvent<HTMLButtonElement>) => void;\n  };\n  emptyState: EmptyStateProps;\n  items?: SummaryCardProps[];\n  onItemClick: (id: SummaryCardProps['id'], e: MouseEvent<HTMLDivElement>) => void;\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst Banner: FC<Pick<GalleryPageProps, 'heading' | 'description' | 'image' | 'action'>> = ({\n  heading,\n  description,\n  image,\n  action\n}) => {\n  return (\n    <Flex container={{ alignItems: 'center', justify: 'between' }} as={StyledBanner}>\n      <Flex as={StyledBannerInfo} item={{ grow: 1 }}>\n        <StyledHeading variant='h1'>{heading}</StyledHeading>\n        {description && <StyledDescription>{description}</StyledDescription>}\n        {action && (\n          <Button onClick={(e: MouseEvent<HTMLButtonElement>) => action.onClick(e)}>\n            {action.text}\n          </Button>\n        )}\n      </Flex>\n      {image && (\n        <StyledImageContainer>\n          <Image {...image} />\n        </StyledImageContainer>\n      )}\n    </Flex>\n  );\n};\n\nconst SummaryCardList: FC<{\n  items: GalleryPageProps['items'];\n  onItemClick: GalleryPageProps['onItemClick'];\n}> = ({ items, onItemClick }) => {\n  return (\n    <Grid\n      container={{\n        cols: 'repeat(auto-fill, minmax(18.75rem, 1fr))',\n        autoRows: '10rem',\n        gap: 2\n      }}\n      as={StyledSummaryCardList}\n    >\n      {items && items.map(item => <SummaryCard key={item.id} {...item} onClick={onItemClick} />)}\n    </Grid>\n  );\n};\n\nconst EmptyState: FC<EmptyStateProps & Pick<GalleryPageProps, 'action'>> = ({\n  heading,\n  description,\n  action\n}) => {\n  return (\n    <Flex\n      container={{ direction: 'column', alignItems: 'center', justify: 'center', rowGap: 2 }}\n      item={{ grow: 1 }}\n    >\n      <StyledHeading variant='h2'>{heading}</StyledHeading>\n      {description && <StyledDescription>{description}</StyledDescription>}\n      {action && (\n        <Button variant='primary' onClick={action.onClick}>\n          {action.text}\n        </Button>\n      )}\n    </Flex>\n  );\n};\n\nconst GalleryPage: FC<GalleryPageProps & ForwardProps> = forwardRef(\n  (\n    {\n      heading,\n      description,\n      image,\n      items,\n      onItemClick,\n      emptyState,\n      action\n    }: PropsWithoutRef<GalleryPageProps>,\n    ref: GalleryPageProps['ref']\n  ) => {\n    return (\n      <StyledGalleryPage\n        title=''\n        ref={ref}\n        header={\n          <Banner heading={heading} description={description} action={action} image={image} />\n        }\n        a={\n          items && items.length > 0 ? (\n            <SummaryCardList items={items} onItemClick={onItemClick} />\n          ) : (\n            <EmptyState {...emptyState} action={action} />\n          )\n        }\n        scrollContent\n      />\n    );\n  }\n);\n\nexport default GalleryPage;\n"]}

package/lib/components/PageTemplates/GalleryPage.styles.d.ts

@@ -0,0 +1,9 @@
+import { Text, Flex, OneColumnPage } from '@pega/cosmos-react-core';
+export declare const StyledBanner: import("styled-components").StyledComponent<"article", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledBannerInfo: typeof Flex;
+export declare const StyledImageContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledSummaryCardList: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledHeading: typeof Text;
+export declare const StyledDescription: typeof Text;
+export declare const StyledGalleryPage: typeof OneColumnPage;
+//# sourceMappingURL=GalleryPage.styles.d.ts.map

package/lib/components/PageTemplates/GalleryPage.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GalleryPage.styles.d.ts","sourceRoot":"","sources":["../../../src/components/PageTemplates/GalleryPage.styles.ts"],"names":[],"mappings":"AAGA,OAAO,EACL,IAAI,EAGJ,IAAI,EAEJ,aAAa,EAEd,MAAM,yBAAyB,CAAC;AAEjC,eAAO,MAAM,YAAY,6GAcvB,CAAC;AAIH,eAAO,MAAM,gBAAgB,EAAE,OAAO,IAqBpC,CAAC;AAIH,eAAO,MAAM,oBAAoB,yGAQhC,CAAC;AAEF,eAAO,MAAM,qBAAqB,yGAIhC,CAAC;AAIH,eAAO,MAAM,aAAa,EAAE,OAAO,IAIlC,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,OAAO,IAKtC,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,OAAO,aAStC,CAAC"}

package/lib/components/PageTemplates/GalleryPage.styles.js

@@ -0,0 +1,70 @@
+import styled, { css } from 'styled-components';
+import { readableColor } from 'polished';
+import { Text, StyledButton, tryCatch, Flex, defaultThemeProp, OneColumnPage, StyledRegion } from '@pega/cosmos-react-core';
+export const StyledBanner = styled.article(({ theme }) => {
+    const { base: { palette: { 'brand-primary': brandBackground } } } = theme;
+    const color = tryCatch(() => readableColor(brandBackground));
+    return css `
+    background: ${brandBackground};
+    color: ${color};
+    height: 11rem;
+  `;
+});
+StyledBanner.defaultProps = defaultThemeProp;
+export const StyledBannerInfo = styled(Flex)(({ theme }) => {
+    const { base: { spacing, shadow } } = theme;
+    return css `
+    padding-inline-start: calc(5 * ${spacing});
+    max-width: 50%;
+
+    ${StyledButton} {
+      margin-block-start: calc(2 * ${spacing});
+      &:enabled:focus,
+      &:not([disabled]):focus {
+        box-shadow: ${shadow['focus-inverted']};
+      }
+    }
+
+    span {
+      margin-block-start: ${spacing};
+    }
+  `;
+});
+StyledBannerInfo.defaultProps = defaultThemeProp;
+export const StyledImageContainer = styled.div `
+  padding: 0;
+  height: 100%;
+  max-width: 50%;
+  img {
+    object-fit: contain;
+    height: 100%;
+  }
+`;
+export const StyledSummaryCardList = styled.div(({ theme }) => {
+    return css `
+    margin-block-start: calc(2 * ${theme.base.spacing});
+  `;
+});
+StyledSummaryCardList.defaultProps = defaultThemeProp;
+export const StyledHeading = styled(Text) `
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+`;
+export const StyledDescription = styled(Text) `
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+`;
+export const StyledGalleryPage = styled(OneColumnPage) `
+  gap: 0;
+  & > header {
+    padding: 0;
+  }
+
+  ${StyledRegion} {
+    height: 100%;
+  }
+`;
+//# sourceMappingURL=GalleryPage.styles.js.map

package/lib/components/PageTemplates/GalleryPage.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GalleryPage.styles.js","sourceRoot":"","sources":["../../../src/components/PageTemplates/GalleryPage.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAEzC,OAAO,EACL,IAAI,EACJ,YAAY,EACZ,QAAQ,EACR,IAAI,EACJ,gBAAgB,EAChB,aAAa,EACb,YAAY,EACb,MAAM,yBAAyB,CAAC;AAEjC,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACvD,MAAM,EACJ,IAAI,EAAE,EACJ,OAAO,EAAE,EAAE,eAAe,EAAE,eAAe,EAAE,EAC9C,EACF,GAAG,KAAK,CAAC;IAEV,MAAM,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC,CAAC;IAE7D,OAAO,GAAG,CAAA;kBACM,eAAe;aACpB,KAAK;;GAEf,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,YAAY,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE7C,MAAM,CAAC,MAAM,gBAAgB,GAAgB,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACtE,MAAM,EACJ,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,EAC1B,GAAG,KAAK,CAAC;IAEV,OAAO,GAAG,CAAA;qCACyB,OAAO;;;MAGtC,YAAY;qCACmB,OAAO;;;sBAGtB,MAAM,CAAC,gBAAgB,CAAC;;;;;4BAKlB,OAAO;;GAEhC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;CAQ7C,CAAC;AAEF,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC5D,OAAO,GAAG,CAAA;mCACuB,KAAK,CAAC,IAAI,CAAC,OAAO;GAClD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,qBAAqB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEtD,MAAM,CAAC,MAAM,aAAa,GAAgB,MAAM,CAAC,IAAI,CAAC,CAAA;;;;CAIrD,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAgB,MAAM,CAAC,IAAI,CAAC,CAAA;;;;;CAKzD,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAyB,MAAM,CAAC,aAAa,CAAC,CAAA;;;;;;IAMxE,YAAY;;;CAGf,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\nimport { readableColor } from 'polished';\n\nimport {\n  Text,\n  StyledButton,\n  tryCatch,\n  Flex,\n  defaultThemeProp,\n  OneColumnPage,\n  StyledRegion\n} from '@pega/cosmos-react-core';\n\nexport const StyledBanner = styled.article(({ theme }) => {\n  const {\n    base: {\n      palette: { 'brand-primary': brandBackground }\n    }\n  } = theme;\n\n  const color = tryCatch(() => readableColor(brandBackground));\n\n  return css`\n    background: ${brandBackground};\n    color: ${color};\n    height: 11rem;\n  `;\n});\n\nStyledBanner.defaultProps = defaultThemeProp;\n\nexport const StyledBannerInfo: typeof Flex = styled(Flex)(({ theme }) => {\n  const {\n    base: { spacing, shadow }\n  } = theme;\n\n  return css`\n    padding-inline-start: calc(5 * ${spacing});\n    max-width: 50%;\n\n    ${StyledButton} {\n      margin-block-start: calc(2 * ${spacing});\n      &:enabled:focus,\n      &:not([disabled]):focus {\n        box-shadow: ${shadow['focus-inverted']};\n      }\n    }\n\n    span {\n      margin-block-start: ${spacing};\n    }\n  `;\n});\n\nStyledBannerInfo.defaultProps = defaultThemeProp;\n\nexport const StyledImageContainer = styled.div`\n  padding: 0;\n  height: 100%;\n  max-width: 50%;\n  img {\n    object-fit: contain;\n    height: 100%;\n  }\n`;\n\nexport const StyledSummaryCardList = styled.div(({ theme }) => {\n  return css`\n    margin-block-start: calc(2 * ${theme.base.spacing});\n  `;\n});\n\nStyledSummaryCardList.defaultProps = defaultThemeProp;\n\nexport const StyledHeading: typeof Text = styled(Text)`\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n`;\n\nexport const StyledDescription: typeof Text = styled(Text)`\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  overflow: hidden;\n`;\n\nexport const StyledGalleryPage: typeof OneColumnPage = styled(OneColumnPage)`\n  gap: 0;\n  & > header {\n    padding: 0;\n  }\n\n  ${StyledRegion} {\n    height: 100%;\n  }\n`;\n"]}

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

@@ -0,0 +1,27 @@
+import { FunctionComponent, MouseEvent } from 'react';
+import { OneColumnPageProps as CoreOneColumnPageProps, TabbedPageProps as CoreTabbedPageProps, FieldValueListProps, ForwardProps, PageTemplateProps, OmitStrict, StatusProps } from '@pega/cosmos-react-core';
+export interface PageHeaderProps extends Pick<PageTemplateProps, 'title' | 'actions'> {
+    metadata?: FieldValueListProps['fields'];
+    branchName?: string;
+    status?: {
+        type?: StatusProps['variant'];
+        label: string;
+    };
+    additionalInfo?: {
+        title: string;
+        description?: string;
+        fields: FieldValueListProps['fields'];
+        onEdit?: (e: MouseEvent<HTMLButtonElement>) => void;
+    };
+}
+declare type OmittedPageProps = 'header' | 'scrollContent';
+export interface OneColumnPageProps extends OmitStrict<CoreOneColumnPageProps, OmittedPageProps>, PageHeaderProps {
+}
+export interface TabbedPageProps extends OmitStrict<CoreTabbedPageProps, OmittedPageProps>, PageHeaderProps {
+}
+export declare const StyledBranch: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledPage: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const TabbedPage: FunctionComponent<TabbedPageProps & ForwardProps>;
+export declare const OneColumnPage: FunctionComponent<OneColumnPageProps & ForwardProps>;
+export {};
+//# sourceMappingURL=PageTemplates.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PageTemplates.d.ts","sourceRoot":"","sources":["../../../src/components/PageTemplates/PageTemplates.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,iBAAiB,EAKjB,UAAU,EACX,MAAM,OAAO,CAAC;AAGf,OAAO,EAEL,kBAAkB,IAAI,sBAAsB,EAE5C,eAAe,IAAI,mBAAmB,EACtC,mBAAmB,EASnB,YAAY,EAMZ,iBAAiB,EACjB,UAAU,EAEV,WAAW,EAGZ,MAAM,yBAAyB,CAAC;AAYjC,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,iBAAiB,EAAE,OAAO,GAAG,SAAS,CAAC;IACnF,QAAQ,CAAC,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAC;IACzC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE;QAAE,IAAI,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IAC1D,cAAc,CAAC,EAAE;QACf,KAAK,EAAE,MAAM,CAAC;QACd,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,MAAM,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAC;QACtC,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;KACrD,CAAC;CACH;AAED,aAAK,gBAAgB,GAAG,QAAQ,GAAG,eAAe,CAAC;AAEnD,MAAM,WAAW,kBACf,SAAQ,UAAU,CAAC,sBAAsB,EAAE,gBAAgB,CAAC,EAC1D,eAAe;CAAG;AAEtB,MAAM,WAAW,eACf,SAAQ,UAAU,CAAC,mBAAmB,EAAE,gBAAgB,CAAC,EACvD,eAAe;CAAG;AAoBtB,eAAO,MAAM,YAAY,yGAQvB,CAAC;AAUH,eAAO,MAAM,UAAU,yGAiBrB,CAAC;AAmIH,eAAO,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,GAAG,YAAY,CAcxE,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,CAoB9E,CAAC"}

package/lib/components/PageTemplates/PageTemplates.js

@@ -0,0 +1,105 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef, useState, useEffect } from 'react';
+import styled, { css } from 'styled-components';
+import { OneColumnPage as CoreOneColumnPage, TabbedPage as CoreTabbedPage, Flex, Status, SummaryItem, Text, Button, Popover, FieldValueList, Icon, defaultThemeProp, useI18n, useDirection, useElement, useOuterEvent, StyledSummaryItemActions, registerIcon, StyledLabel } from '@pega/cosmos-react-core';
+import * as nodesDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/nodes-down.icon';
+import * as informationIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/information.icon';
+import { StyledRegions, StyledRegion, StyledContent } from '@pega/cosmos-react-core/lib/components/PageTemplates/PageTemplates';
+import { StyledTabPanel } from '@pega/cosmos-react-core/lib/components/Tabs/TabPanel';
+registerIcon(nodesDownIcon, informationIcon);
+const StyledTextWithEllipsis = styled(Text) `
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+`;
+const StyledInfoPopover = styled(Popover) `
+  max-width: 60ch;
+  overflow-wrap: break-word;
+`;
+const StyledMetaFields = styled.dl `
+  dd,
+  dt {
+    display: inline;
+  }
+`;
+export const StyledBranch = styled.div(({ theme }) => {
+    return css `
+    border: 0.0625rem solid ${theme.base.colors.gray.light};
+    border-radius: calc(0.5 * ${theme.base['border-radius']});
+    padding: calc(0.5 * ${theme.base.spacing});
+    max-width: 100%;
+    overflow: hidden;
+  `;
+});
+StyledBranch.defaultProps = defaultThemeProp;
+const StyledHeaderContent = styled(SummaryItem) `
+  ${StyledSummaryItemActions} {
+    align-self: start;
+  }
+`;
+export const StyledPage = styled.div(({ theme }) => {
+    return css `
+    ${StyledContent} {
+      margin: 0 calc(2 * ${theme.base.spacing});
+    }
+    ${StyledRegions} {
+      padding: 0;
+      grid-template-rows: repeat(auto-fit, minmax(0, 1fr));
+      ${StyledRegion} {
+        height: 100%;
+      }
+    }
+
+    ${StyledTabPanel} {
+      height: 100%;
+    }
+  `;
+});
+const MetaFields = ({ metadata }) => {
+    return (_jsx(Flex, { container: { wrap: 'wrap', colGap: 1, rowGap: 0.25 }, as: StyledMetaFields, children: metadata.map(meta => {
+            return (_jsxs("div", { children: [_jsxs(StyledLabel, { as: 'dt', children: [meta.name, _jsx("span", { "aria-hidden": 'true', children: ": " }, void 0)] }, void 0), _jsx(Text, { variant: 'secondary', as: 'dd', children: meta.value }, void 0)] }, meta.id));
+        }) }, void 0));
+};
+const Branch = ({ branchName, status }) => {
+    return (_jsxs(Flex, { container: { alignItems: 'center', gap: 0.5 }, as: StyledBranch, children: [status && (_jsx(Flex, { item: { shrink: 0 }, as: Status, variant: status.type, children: status.label }, void 0)), _jsx(Flex, { item: { shrink: 0 }, as: Icon, name: 'nodes-down' }, void 0), branchName && _jsx(StyledTextWithEllipsis, { children: branchName }, void 0)] }, void 0));
+};
+const PageHeader = ({ title, metadata, additionalInfo, actions, branchName, status }) => {
+    const [open, setOpen] = useState(false);
+    const [popoverEl, setPopoverRef] = useElement();
+    const [buttonEl, setButtonEl] = useElement();
+    const t = useI18n();
+    const { rtl } = useDirection();
+    useOuterEvent('mousedown', [popoverEl, buttonEl], () => {
+        if (open)
+            setOpen(false);
+    });
+    useEffect(() => {
+        const closePopover = (e) => {
+            if (e.key === 'Escape') {
+                e.preventDefault();
+                setOpen(false);
+                if (e.currentTarget === popoverEl) {
+                    e.stopPropagation();
+                    buttonEl?.focus();
+                }
+            }
+        };
+        document.addEventListener('keydown', closePopover);
+        popoverEl?.addEventListener('keydown', closePopover);
+        return () => {
+            document.removeEventListener('keydown', closePopover);
+            popoverEl?.removeEventListener('keydown', closePopover);
+        };
+    }, [popoverEl]);
+    return (_jsx(StyledHeaderContent, { container: { rowGap: 0.5 }, primary: _jsxs(Flex, { container: { alignItems: 'start', gap: 0.5, wrap: 'wrap' }, children: [_jsxs(Flex, { container: { gap: 0.5 }, item: { shrink: 0 }, children: [_jsx(StyledTextWithEllipsis, { variant: 'h1', children: title }, void 0), additionalInfo && (_jsxs(_Fragment, { children: [_jsx(Button, { label: t('additional_info'), variant: 'simple', icon: true, ref: setButtonEl, onClick: () => setOpen(cur => !cur), children: _jsx(Icon, { name: 'information' }, void 0) }, void 0), _jsx(StyledInfoPopover, { ref: setPopoverRef, show: open, target: buttonEl, placement: rtl ? 'bottom-end' : 'bottom-start', children: _jsxs(Flex, { container: { direction: 'column', alignItems: 'start', gap: 2, pad: 2 }, children: [_jsxs(Flex, { container: { direction: 'column', gap: 1 }, children: [_jsx(Text, { variant: 'h3', children: additionalInfo.title }, void 0), additionalInfo.description && (_jsx(Text, { as: 'p', children: additionalInfo.description }, void 0)), _jsx(FieldValueList, { variant: 'inline', fields: additionalInfo.fields }, void 0)] }, void 0), additionalInfo.onEdit && (_jsx(Button, { onClick: (e) => {
+                                                    setOpen(false);
+                                                    additionalInfo.onEdit?.(e);
+                                                }, children: t('edit_details') }, void 0))] }, void 0) }, void 0)] }, void 0))] }, void 0), branchName && status && _jsx(Branch, { branchName: branchName, status: status }, void 0)] }, void 0), secondary: metadata && _jsx(MetaFields, { metadata: metadata }, void 0), actions: actions }, void 0));
+};
+export const TabbedPage = forwardRef(({ tabs, a, ...restProps }, ref) => {
+    return (_jsx(CoreTabbedPage, { ...restProps, as: StyledPage, header: _jsx(PageHeader, { ...restProps }, void 0), tabs: tabs, ref: ref, scrollContent: true, a: a }, void 0));
+});
+export const OneColumnPage = forwardRef(({ a, ...restProps }, ref) => {
+    return (_jsx(CoreOneColumnPage, { ...restProps, as: StyledPage, header: _jsx(PageHeader, { ...restProps }, void 0), scrollContent: true, a: a, ref: ref }, void 0));
+});
+//# sourceMappingURL=PageTemplates.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PageTemplates.js","sourceRoot":"","sources":["../../../src/components/PageTemplates/PageTemplates.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  PropsWithoutRef,\n  Ref,\n  FunctionComponent,\n  forwardRef,\n  useState,\n  useEffect,\n  FC,\n  MouseEvent\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  OneColumnPage as CoreOneColumnPage,\n  OneColumnPageProps as CoreOneColumnPageProps,\n  TabbedPage as CoreTabbedPage,\n  TabbedPageProps as CoreTabbedPageProps,\n  FieldValueListProps,\n  Flex,\n  Status,\n  SummaryItem,\n  Text,\n  Button,\n  Popover,\n  FieldValueList,\n  Icon,\n  ForwardProps,\n  defaultThemeProp,\n  useI18n,\n  useDirection,\n  useElement,\n  useOuterEvent,\n  PageTemplateProps,\n  OmitStrict,\n  StyledSummaryItemActions,\n  StatusProps,\n  registerIcon,\n  StyledLabel\n} from '@pega/cosmos-react-core';\nimport * as nodesDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/nodes-down.icon';\nimport * as informationIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/information.icon';\nimport {\n  StyledRegions,\n  StyledRegion,\n  StyledContent\n} from '@pega/cosmos-react-core/lib/components/PageTemplates/PageTemplates';\nimport { StyledTabPanel } from '@pega/cosmos-react-core/lib/components/Tabs/TabPanel';\n\nregisterIcon(nodesDownIcon, informationIcon);\n\nexport interface PageHeaderProps extends Pick<PageTemplateProps, 'title' | 'actions'> {\n  metadata?: FieldValueListProps['fields'];\n  branchName?: string;\n  status?: { type?: StatusProps['variant']; label: string };\n  additionalInfo?: {\n    title: string;\n    description?: string;\n    fields: FieldValueListProps['fields'];\n    onEdit?: (e: MouseEvent<HTMLButtonElement>) => void;\n  };\n}\n\ntype OmittedPageProps = 'header' | 'scrollContent';\n\nexport interface OneColumnPageProps\n  extends OmitStrict<CoreOneColumnPageProps, OmittedPageProps>,\n    PageHeaderProps {}\n\nexport interface TabbedPageProps\n  extends OmitStrict<CoreTabbedPageProps, OmittedPageProps>,\n    PageHeaderProps {}\n\nconst StyledTextWithEllipsis: typeof Text = styled(Text)`\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n`;\n\nconst StyledInfoPopover: typeof Popover = styled(Popover)`\n  max-width: 60ch;\n  overflow-wrap: break-word;\n`;\n\nconst StyledMetaFields = styled.dl`\n  dd,\n  dt {\n    display: inline;\n  }\n`;\n\nexport const StyledBranch = styled.div(({ theme }) => {\n  return css`\n    border: 0.0625rem solid ${theme.base.colors.gray.light};\n    border-radius: calc(0.5 * ${theme.base['border-radius']});\n    padding: calc(0.5 * ${theme.base.spacing});\n    max-width: 100%;\n    overflow: hidden;\n  `;\n});\n\nStyledBranch.defaultProps = defaultThemeProp;\n\nconst StyledHeaderContent = styled(SummaryItem)`\n  ${StyledSummaryItemActions} {\n    align-self: start;\n  }\n`;\n\nexport const StyledPage = styled.div(({ theme }) => {\n  return css`\n    ${StyledContent} {\n      margin: 0 calc(2 * ${theme.base.spacing});\n    }\n    ${StyledRegions} {\n      padding: 0;\n      grid-template-rows: repeat(auto-fit, minmax(0, 1fr));\n      ${StyledRegion} {\n        height: 100%;\n      }\n    }\n\n    ${StyledTabPanel} {\n      height: 100%;\n    }\n  `;\n});\n\nconst MetaFields: FC<{ metadata: NonNullable<PageHeaderProps['metadata']> }> = ({ metadata }) => {\n  return (\n    <Flex container={{ wrap: 'wrap', colGap: 1, rowGap: 0.25 }} as={StyledMetaFields}>\n      {metadata.map(meta => {\n        return (\n          <div key={meta.id}>\n            <StyledLabel as='dt'>\n              {meta.name}\n              <span aria-hidden='true'>: </span>\n            </StyledLabel>\n            <Text variant='secondary' as='dd'>\n              {meta.value}\n            </Text>\n          </div>\n        );\n      })}\n    </Flex>\n  );\n};\n\nconst Branch: FC<Pick<PageHeaderProps, 'branchName' | 'status'>> = ({ branchName, status }) => {\n  return (\n    <Flex container={{ alignItems: 'center', gap: 0.5 }} as={StyledBranch}>\n      {status && (\n        <Flex item={{ shrink: 0 }} as={Status} variant={status.type}>\n          {status.label}\n        </Flex>\n      )}\n      <Flex item={{ shrink: 0 }} as={Icon} name='nodes-down' />\n      {branchName && <StyledTextWithEllipsis>{branchName}</StyledTextWithEllipsis>}\n    </Flex>\n  );\n};\n\nconst PageHeader = ({\n  title,\n  metadata,\n  additionalInfo,\n  actions,\n  branchName,\n  status\n}: PageHeaderProps) => {\n  const [open, setOpen] = useState(false);\n  const [popoverEl, setPopoverRef] = useElement<HTMLElement>();\n  const [buttonEl, setButtonEl] = useElement<HTMLElement>();\n  const t = useI18n();\n  const { rtl } = useDirection();\n\n  useOuterEvent('mousedown', [popoverEl, buttonEl], () => {\n    if (open) setOpen(false);\n  });\n\n  useEffect(() => {\n    const closePopover = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        e.preventDefault();\n        setOpen(false);\n        if (e.currentTarget === popoverEl) {\n          e.stopPropagation();\n          buttonEl?.focus();\n        }\n      }\n    };\n\n    document.addEventListener('keydown', closePopover);\n    popoverEl?.addEventListener('keydown', closePopover);\n\n    return () => {\n      document.removeEventListener('keydown', closePopover);\n      popoverEl?.removeEventListener('keydown', closePopover);\n    };\n  }, [popoverEl]);\n\n  return (\n    <StyledHeaderContent\n      container={{ rowGap: 0.5 }}\n      primary={\n        <Flex container={{ alignItems: 'start', gap: 0.5, wrap: 'wrap' }}>\n          <Flex container={{ gap: 0.5 }} item={{ shrink: 0 }}>\n            <StyledTextWithEllipsis variant='h1'>{title}</StyledTextWithEllipsis>\n            {additionalInfo && (\n              <>\n                <Button\n                  label={t('additional_info')}\n                  variant='simple'\n                  icon\n                  ref={setButtonEl}\n                  onClick={() => setOpen(cur => !cur)}\n                >\n                  <Icon name='information' />\n                </Button>\n                <StyledInfoPopover\n                  ref={setPopoverRef}\n                  show={open}\n                  target={buttonEl}\n                  placement={rtl ? 'bottom-end' : 'bottom-start'}\n                >\n                  <Flex container={{ direction: 'column', alignItems: 'start', gap: 2, pad: 2 }}>\n                    <Flex container={{ direction: 'column', gap: 1 }}>\n                      <Text variant='h3'>{additionalInfo.title}</Text>\n                      {additionalInfo.description && (\n                        <Text as='p'>{additionalInfo.description}</Text>\n                      )}\n                      <FieldValueList variant='inline' fields={additionalInfo.fields} />\n                    </Flex>\n                    {additionalInfo.onEdit && (\n                      <Button\n                        onClick={(e: MouseEvent<HTMLButtonElement>) => {\n                          setOpen(false);\n                          additionalInfo.onEdit?.(e);\n                        }}\n                      >\n                        {t('edit_details')}\n                      </Button>\n                    )}\n                  </Flex>\n                </StyledInfoPopover>\n              </>\n            )}\n          </Flex>\n          {branchName && status && <Branch branchName={branchName} status={status} />}\n        </Flex>\n      }\n      secondary={metadata && <MetaFields metadata={metadata} />}\n      actions={actions}\n    />\n  );\n};\n\nexport const TabbedPage: FunctionComponent<TabbedPageProps & ForwardProps> = forwardRef(\n  ({ tabs, a, ...restProps }: PropsWithoutRef<TabbedPageProps>, ref: Ref<HTMLDivElement>) => {\n    return (\n      <CoreTabbedPage\n        {...restProps}\n        as={StyledPage}\n        header={<PageHeader {...restProps} />}\n        tabs={tabs}\n        ref={ref}\n        scrollContent\n        a={a}\n      />\n    );\n  }\n);\n\nexport const OneColumnPage: FunctionComponent<OneColumnPageProps & ForwardProps> = forwardRef(\n  (\n    {\n      a,\n\n      ...restProps\n    }: PropsWithoutRef<OneColumnPageProps>,\n    ref: Ref<HTMLDivElement>\n  ) => {\n    return (\n      <CoreOneColumnPage\n        {...restProps}\n        as={StyledPage}\n        header={<PageHeader {...restProps} />}\n        scrollContent\n        a={a}\n        ref={ref}\n      />\n    );\n  }\n);\n"]}

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

@@ -0,0 +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

@@ -0,0 +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;AAC7C,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC"}

package/lib/components/PageTemplates/index.js

@@ -0,0 +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

@@ -0,0 +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;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, NoChildrenProp } from '@pega/cosmos-react-core';
+import { VisualProps } from '../Visual';
+export interface SummaryCardProps extends NoChildrenProp {
+    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,EACb,cAAc,EACf,MAAM,yBAAyB,CAAC;AAIjC,OAAe,EAAE,WAAW,EAAyB,MAAM,WAAW,CAAC;AAEvE,MAAM,WAAW,gBAAiB,SAAQ,cAAc;IACtD,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,EAGjB,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  NoChildrenProp\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 extends NoChildrenProp {\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/components/Workbench/ConfigurationPanel.d.ts

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

package/lib/components/Workbench/ConfigurationPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfigurationPanel.d.ts","sourceRoot":"","sources":["../../../src/components/Workbench/ConfigurationPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAA0B,MAAM,OAAO,CAAC;AAanD,OAAO,EAAE,uBAAuB,EAAE,MAAM,mBAAmB,CAAC;AAE5D,QAAA,MAAM,kBAAkB,EAAE,EAAE,CAAC,uBAAuB,CA4CnD,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/lib/components/Workbench/ConfigurationPanel.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect } from 'react';
+import { Flex, Text, Button, Icon, useElement, useI18n, ExpandCollapse } from '@pega/cosmos-react-core';
+import { StyledPanel } from './Workbench.styles';
+const ConfigurationPanel = ({ open, header, content, onDismiss }) => {
+    const [buttonEl, setButtonEl] = useElement();
+    const t = useI18n();
+    const onKeyDown = useCallback(({ key }) => {
+        if (key === 'Escape')
+            onDismiss();
+    }, [onDismiss]);
+    useEffect(() => {
+        document.addEventListener('keydown', onKeyDown);
+        return () => {
+            document.removeEventListener('keydown', onKeyDown);
+        };
+    }, [onKeyDown]);
+    return (_jsx(ExpandCollapse, { as: StyledPanel, dimension: 'width', collapsed: !open, min: '0', max: '25rem', onAfterExpand: () => buttonEl?.focus(), children: _jsxs(Flex, { container: { pad: 2, direction: 'column', gap: 1 }, children: [_jsxs(Flex, { container: { justify: 'between', alignItems: 'center' }, children: [_jsx(Text, { variant: 'h3', children: header }, void 0), _jsx(Button, { variant: 'simple', icon: true, onClick: onDismiss, ref: setButtonEl, "aria-label": t('close'), children: _jsx(Icon, { name: 'times' }, void 0) }, void 0)] }, void 0), content] }, void 0) }, void 0));
+};
+export default ConfigurationPanel;
+//# sourceMappingURL=ConfigurationPanel.js.map

package/lib/components/Workbench/ConfigurationPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfigurationPanel.js","sourceRoot":"","sources":["../../../src/components/Workbench/ConfigurationPanel.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEnD,OAAO,EACL,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,IAAI,EACJ,UAAU,EACV,OAAO,EACP,cAAc,EACf,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAGjD,MAAM,kBAAkB,GAAgC,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,EAAE;IAC/F,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,UAAU,EAAe,CAAC;IAC1D,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,MAAM,SAAS,GAAG,WAAW,CAC3B,CAAC,EAAE,GAAG,EAAiB,EAAE,EAAE;QACzB,IAAI,GAAG,KAAK,QAAQ;YAAE,SAAS,EAAE,CAAC;IACpC,CAAC,EACD,CAAC,SAAS,CAAC,CACZ,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;QAChD,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;QACrD,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,OAAO,CACL,KAAC,cAAc,IACb,EAAE,EAAE,WAAW,EACf,SAAS,EAAC,OAAO,EACjB,SAAS,EAAE,CAAC,IAAI,EAChB,GAAG,EAAC,GAAG,EACP,GAAG,EAAC,OAAO,EACX,aAAa,EAAE,GAAG,EAAE,CAAC,QAAQ,EAAE,KAAK,EAAE,YAEtC,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aACtD,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,aAC3D,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,MAAM,WAAQ,EAClC,KAAC,MAAM,IACL,OAAO,EAAC,QAAQ,EAChB,IAAI,QACJ,OAAO,EAAE,SAAS,EAClB,GAAG,EAAE,WAAW,gBACJ,CAAC,CAAC,OAAO,CAAC,YAEtB,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,WAAG,WACd,YACJ,EACN,OAAO,YACH,WACQ,CAClB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,kBAAkB,CAAC","sourcesContent":["import { FC, useCallback, useEffect } from 'react';\n\nimport {\n  Flex,\n  Text,\n  Button,\n  Icon,\n  useElement,\n  useI18n,\n  ExpandCollapse\n} from '@pega/cosmos-react-core';\n\nimport { StyledPanel } from './Workbench.styles';\nimport { ConfigurationPanelProps } from './Workbench.types';\n\nconst ConfigurationPanel: FC<ConfigurationPanelProps> = ({ open, header, content, onDismiss }) => {\n  const [buttonEl, setButtonEl] = useElement<HTMLElement>();\n  const t = useI18n();\n\n  const onKeyDown = useCallback(\n    ({ key }: KeyboardEvent) => {\n      if (key === 'Escape') onDismiss();\n    },\n    [onDismiss]\n  );\n\n  useEffect(() => {\n    document.addEventListener('keydown', onKeyDown);\n    return () => {\n      document.removeEventListener('keydown', onKeyDown);\n    };\n  }, [onKeyDown]);\n\n  return (\n    <ExpandCollapse\n      as={StyledPanel}\n      dimension='width'\n      collapsed={!open}\n      min='0'\n      max='25rem'\n      onAfterExpand={() => buttonEl?.focus()}\n    >\n      <Flex container={{ pad: 2, direction: 'column', gap: 1 }}>\n        <Flex container={{ justify: 'between', alignItems: 'center' }}>\n          <Text variant='h3'>{header}</Text>\n          <Button\n            variant='simple'\n            icon\n            onClick={onDismiss}\n            ref={setButtonEl}\n            aria-label={t('close')}\n          >\n            <Icon name='times' />\n          </Button>\n        </Flex>\n        {content}\n      </Flex>\n    </ExpandCollapse>\n  );\n};\n\nexport default ConfigurationPanel;\n"]}

package/lib/components/Workbench/Toolbar.d.ts

@@ -0,0 +1,14 @@
+import { FC } from 'react';
+import { ToolbarProps, UtilityPanelProps } from './Workbench.types';
+interface UtilityPanelSelectorProps {
+    options: Pick<UtilityPanelProps, 'id' | 'title' | 'icon'>[];
+    onToggle: (panelId?: UtilityPanelProps['id']) => void;
+    currentPanelId: UtilityPanelProps['id'] | undefined;
+}
+interface ZoomProps {
+    zoomLevel: number;
+    onZoomLevelChange: (value: number) => void;
+}
+declare const Toolbar: FC<ToolbarProps & UtilityPanelSelectorProps & ZoomProps>;
+export default Toolbar;
+//# sourceMappingURL=Toolbar.d.ts.map

package/lib/components/Workbench/Toolbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toolbar.d.ts","sourceRoot":"","sources":["../../../src/components/Workbench/Toolbar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAK3B,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEpE,UAAU,yBAAyB;IACjC,OAAO,EAAE,IAAI,CAAC,iBAAiB,EAAE,IAAI,GAAG,OAAO,GAAG,MAAM,CAAC,EAAE,CAAC;IAC5D,QAAQ,EAAE,CAAC,OAAO,CAAC,EAAE,iBAAiB,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IACtD,cAAc,EAAE,iBAAiB,CAAC,IAAI,CAAC,GAAG,SAAS,CAAC;CACrD;AAED,UAAU,SAAS;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC5C;AAED,QAAA,MAAM,OAAO,EAAE,EAAE,CAAC,YAAY,GAAG,yBAAyB,GAAG,SAAS,CA6ErE,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/lib/components/Workbench/Toolbar.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Flex, Icon, NumberInput, Button, useI18n } from '@pega/cosmos-react-core';
+import { StyledPanelToggleWrapper, StyledToolbar, UtilityPanelToggle } from './Workbench.styles';
+const Toolbar = ({ zoom = false, zoomLevel, onZoomLevelChange, options, currentPanelId, onToggle, toolbarActions: { undo, redo } = {} }) => {
+    const t = useI18n();
+    return (_jsxs(Flex, { as: StyledToolbar, container: { justify: 'between' }, children: [_jsxs(Flex, { container: { alignItems: 'center' }, children: [_jsx(Flex, { container: { alignItems: 'center' }, as: StyledPanelToggleWrapper, children: options.map(panelDef => {
+                            const selected = panelDef.id === currentPanelId;
+                            return (_jsx(Button, { variant: 'simple', as: UtilityPanelToggle, icon: true, "aria-selected": selected, onClick: () => {
+                                    onToggle(selected ? undefined : panelDef.id);
+                                }, label: t(selected ? 'collapse_noun' : 'expand_noun', [panelDef.title]), children: _jsx(Icon, { name: panelDef.icon }, void 0) }, panelDef.id));
+                        }) }, void 0), undo && (_jsx(Button, { label: t('undo'), variant: 'simple', icon: true, onClick: undo.onClick, disabled: undo.disabled, children: _jsx(Icon, { name: 'arrow-bend-left' }, void 0) }, void 0)), redo && (_jsx(Button, { label: t('redo'), variant: 'simple', icon: true, onClick: redo.onClick, disabled: redo.disabled, children: _jsx(Icon, { name: 'arrow-bend-right' }, void 0) }, void 0))] }, void 0), _jsx(Flex, { container: { alignItems: 'center' }, children: zoom && (_jsx(NumberInput, { variant: 'stepper', label: t('zoom_level'), labelHidden: true, value: zoomLevel.toString(), onChange: value => onZoomLevelChange(Number(value)), showDecimal: false, showGroupSeparators: false, step: 25, unit: '%', unitPlacement: 'after', min: 25, max: 300 }, void 0)) }, void 0)] }, void 0));
+};
+export default Toolbar;
+//# sourceMappingURL=Toolbar.js.map

package/lib/components/Workbench/Toolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toolbar.js","sourceRoot":"","sources":["../../../src/components/Workbench/Toolbar.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAEnF,OAAO,EAAE,wBAAwB,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAcjG,MAAM,OAAO,GAA6D,CAAC,EACzE,IAAI,GAAG,KAAK,EACZ,SAAS,EACT,iBAAiB,EACjB,OAAO,EACP,cAAc,EACd,QAAQ,EACR,cAAc,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,EACkB,EAAE,EAAE;IACzD,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,OAAO,CACL,MAAC,IAAI,IAAC,EAAE,EAAE,aAAa,EAAE,SAAS,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,aACxD,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,aACvC,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAE,wBAAwB,YACpE,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE;4BACtB,MAAM,QAAQ,GAAG,QAAQ,CAAC,EAAE,KAAK,cAAc,CAAC;4BAChD,OAAO,CACL,KAAC,MAAM,IACL,OAAO,EAAC,QAAQ,EAChB,EAAE,EAAE,kBAAkB,EACtB,IAAI,yBACW,QAAQ,EACvB,OAAO,EAAE,GAAG,EAAE;oCACZ,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;gCAC/C,CAAC,EACD,KAAK,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,aAAa,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,YAGtE,KAAC,IAAI,IAAC,IAAI,EAAE,QAAQ,CAAC,IAAI,WAAI,IAFxB,QAAQ,CAAC,EAAE,CAGT,CACV,CAAC;wBACJ,CAAC,CAAC,WACG,EACN,IAAI,IAAI,CACP,KAAC,MAAM,IACL,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,EAChB,OAAO,EAAC,QAAQ,EAChB,IAAI,QACJ,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,YAEvB,KAAC,IAAI,IAAC,IAAI,EAAC,iBAAiB,WAAG,WACxB,CACV,EACA,IAAI,IAAI,CACP,KAAC,MAAM,IACL,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,EAChB,OAAO,EAAC,QAAQ,EAChB,IAAI,QACJ,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,YAEvB,KAAC,IAAI,IAAC,IAAI,EAAC,kBAAkB,WAAG,WACzB,CACV,YACI,EACP,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,YACtC,IAAI,IAAI,CACP,KAAC,WAAW,IACV,OAAO,EAAC,SAAS,EACjB,KAAK,EAAE,CAAC,CAAC,YAAY,CAAC,EACtB,WAAW,QACX,KAAK,EAAE,SAAS,CAAC,QAAQ,EAAE,EAC3B,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,EACnD,WAAW,EAAE,KAAK,EAClB,mBAAmB,EAAE,KAAK,EAC1B,IAAI,EAAE,EAAE,EACR,IAAI,EAAC,GAAG,EACR,aAAa,EAAC,OAAO,EACrB,GAAG,EAAE,EAAE,EACP,GAAG,EAAE,GAAG,WACR,CACH,WACI,YACF,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,OAAO,CAAC","sourcesContent":["import { FC } from 'react';\n\nimport { Flex, Icon, NumberInput, Button, useI18n } from '@pega/cosmos-react-core';\n\nimport { StyledPanelToggleWrapper, StyledToolbar, UtilityPanelToggle } from './Workbench.styles';\nimport { ToolbarProps, UtilityPanelProps } from './Workbench.types';\n\ninterface UtilityPanelSelectorProps {\n  options: Pick<UtilityPanelProps, 'id' | 'title' | 'icon'>[];\n  onToggle: (panelId?: UtilityPanelProps['id']) => void;\n  currentPanelId: UtilityPanelProps['id'] | undefined;\n}\n\ninterface ZoomProps {\n  zoomLevel: number;\n  onZoomLevelChange: (value: number) => void;\n}\n\nconst Toolbar: FC<ToolbarProps & UtilityPanelSelectorProps & ZoomProps> = ({\n  zoom = false,\n  zoomLevel,\n  onZoomLevelChange,\n  options,\n  currentPanelId,\n  onToggle,\n  toolbarActions: { undo, redo } = {}\n}: ToolbarProps & UtilityPanelSelectorProps & ZoomProps) => {\n  const t = useI18n();\n\n  return (\n    <Flex as={StyledToolbar} container={{ justify: 'between' }}>\n      <Flex container={{ alignItems: 'center' }}>\n        <Flex container={{ alignItems: 'center' }} as={StyledPanelToggleWrapper}>\n          {options.map(panelDef => {\n            const selected = panelDef.id === currentPanelId;\n            return (\n              <Button\n                variant='simple'\n                as={UtilityPanelToggle}\n                icon\n                aria-selected={selected}\n                onClick={() => {\n                  onToggle(selected ? undefined : panelDef.id);\n                }}\n                label={t(selected ? 'collapse_noun' : 'expand_noun', [panelDef.title])}\n                key={panelDef.id}\n              >\n                <Icon name={panelDef.icon} />\n              </Button>\n            );\n          })}\n        </Flex>\n        {undo && (\n          <Button\n            label={t('undo')}\n            variant='simple'\n            icon\n            onClick={undo.onClick}\n            disabled={undo.disabled}\n          >\n            <Icon name='arrow-bend-left' />\n          </Button>\n        )}\n        {redo && (\n          <Button\n            label={t('redo')}\n            variant='simple'\n            icon\n            onClick={redo.onClick}\n            disabled={redo.disabled}\n          >\n            <Icon name='arrow-bend-right' />\n          </Button>\n        )}\n      </Flex>\n      <Flex container={{ alignItems: 'center' }}>\n        {zoom && (\n          <NumberInput\n            variant='stepper'\n            label={t('zoom_level')}\n            labelHidden\n            value={zoomLevel.toString()}\n            onChange={value => onZoomLevelChange(Number(value))}\n            showDecimal={false}\n            showGroupSeparators={false}\n            step={25}\n            unit='%'\n            unitPlacement='after'\n            min={25}\n            max={300}\n          />\n        )}\n      </Flex>\n    </Flex>\n  );\n};\n\nexport default Toolbar;\n"]}

package/lib/components/Workbench/UtilityPanel.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+import { UtilityPanelProps } from './Workbench.types';
+declare const UtilityPanel: FC<UtilityPanelProps & {
+    open: boolean;
+}>;
+export default UtilityPanel;
+//# sourceMappingURL=UtilityPanel.d.ts.map

package/lib/components/Workbench/UtilityPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UtilityPanel.d.ts","sourceRoot":"","sources":["../../../src/components/Workbench/UtilityPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAU,MAAM,OAAO,CAAC;AAKnC,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEtD,QAAA,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,GAAG;IAAE,IAAI,EAAE,OAAO,CAAA;CAAE,CAuB3D,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/components/Workbench/UtilityPanel.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from 'react';
+import { ExpandCollapse, Text, Flex, getFocusables } from '@pega/cosmos-react-core';
+import { StyledPanel } from './Workbench.styles';
+const UtilityPanel = ({ content, title, open }) => {
+    const ref = useRef(null);
+    return (_jsx(ExpandCollapse, { dimension: 'width', collapsed: !open, as: StyledPanel, min: '0', max: '14rem', onBeforeExpand: () => {
+            getFocusables(ref)[0]?.focus();
+        }, children: _jsxs(Flex, { container: { pad: 2, gap: 1, direction: 'column' }, ref: ref, children: [_jsx(Text, { variant: 'h3', children: title }, void 0), content] }, void 0) }, void 0));
+};
+export default UtilityPanel;
+//# sourceMappingURL=UtilityPanel.js.map

package/lib/components/Workbench/UtilityPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UtilityPanel.js","sourceRoot":"","sources":["../../../src/components/Workbench/UtilityPanel.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,MAAM,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,EAAE,cAAc,EAAE,IAAI,EAAE,IAAI,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAEpF,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAGjD,MAAM,YAAY,GAA8C,CAAC,EAC/D,OAAO,EACP,KAAK,EACL,IAAI,EACkC,EAAE,EAAE;IAC1C,MAAM,GAAG,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACzC,OAAO,CACL,KAAC,cAAc,IACb,SAAS,EAAC,OAAO,EACjB,SAAS,EAAE,CAAC,IAAI,EAChB,EAAE,EAAE,WAAW,EACf,GAAG,EAAC,GAAG,EACP,GAAG,EAAC,OAAO,EACX,cAAc,EAAE,GAAG,EAAE;YACnB,aAAa,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC;QACjC,CAAC,YAED,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,GAAG,EAAE,GAAG,aAChE,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,KAAK,WAAQ,EAChC,OAAO,YACH,WACQ,CAClB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { FC, useRef } from 'react';\n\nimport { ExpandCollapse, Text, Flex, getFocusables } from '@pega/cosmos-react-core';\n\nimport { StyledPanel } from './Workbench.styles';\nimport { UtilityPanelProps } from './Workbench.types';\n\nconst UtilityPanel: FC<UtilityPanelProps & { open: boolean }> = ({\n  content,\n  title,\n  open\n}: UtilityPanelProps & { open: boolean }) => {\n  const ref = useRef<HTMLDivElement>(null);\n  return (\n    <ExpandCollapse\n      dimension='width'\n      collapsed={!open}\n      as={StyledPanel}\n      min='0'\n      max='14rem'\n      onBeforeExpand={() => {\n        getFocusables(ref)[0]?.focus();\n      }}\n    >\n      <Flex container={{ pad: 2, gap: 1, direction: 'column' }} ref={ref}>\n        <Text variant='h3'>{title}</Text>\n        {content}\n      </Flex>\n    </ExpandCollapse>\n  );\n};\n\nexport default UtilityPanel;\n"]}