@pega/cosmos-react-work 3.0.0-dev.9.1 → 3.0.0-rc.10

package/lib/components/CaseView/CaseView.styles.d.ts

@@ -1,23 +1,20 @@
-export declare const StyledCaseViewContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
-    forceMobile?: boolean | undefined;
-    isMediumOrAbove?: boolean | undefined;
-    persistentUtility?: boolean | undefined;
-}, never>;
+export declare const StyledCaseSummaryFields: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledCaseHeader: import("styled-components").StyledComponent<"header", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledCaseIconWrap: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledFollowIconWrap: import("styled-components").StyledComponent<"label", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledSubheading: import("styled-components").StyledComponent<"p", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledCaseHeaderText: import("styled-components").StyledComponent<"hgroup", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledPromotedActions: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledCaseSummaryInfo: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledExpandCollapseButton: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").ButtonProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledCaseSummary: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledWorkArea: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledUtilToggle: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledCaseViewUtilities: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
-    utilitiesShown: boolean;
-}, never>;
-export declare const StyledCaseView: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
-    forceMobile?: boolean | undefined;
-    isMediumOrAbove?: boolean | undefined;
-    stickyOffset: number;
-}, never>;
-export declare const StyledSummaryRegion: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
-    forceMobile?: boolean | undefined;
-    desktop?: boolean | undefined;
-}, never>;
+export declare const StyledUtilities: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledSummary: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledCaseDrawer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledCaseDrawerContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledPersistentUtility: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const ScrollStick: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledCaseView: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 //# sourceMappingURL=CaseView.styles.d.ts.map

package/lib/components/CaseView/CaseView.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CaseView.styles.d.ts","sourceRoot":"","sources":["../../../src/components/CaseView/CaseView.styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,qBAAqB;;;;SAqBhC,CAAC;AAEH,eAAO,MAAM,gBAAgB,4GAM3B,CAAC;AAIH,eAAO,MAAM,uBAAuB;oBAAgC,OAAO;SAQ1E,CAAC;AAIF,eAAO,MAAM,cAAc;;;kBAGX,MAAM;SAiBpB,CAAC;AAIH,eAAO,MAAM,mBAAmB;;;SAiB9B,CAAC;AAIH,eAAO,MAAM,gBAAgB,yGAU3B,CAAC;AAIH,eAAO,MAAM,uBAAuB,yGAOlC,CAAC;AAIH,eAAO,MAAM,uBAAuB,yGAQlC,CAAC;AAIH,eAAO,MAAM,WAAW,yGAGvB,CAAC"}
+{"version":3,"file":"CaseView.styles.d.ts","sourceRoot":"","sources":["../../../src/components/CaseView/CaseView.styles.ts"],"names":[],"mappings":"AAsBA,eAAO,MAAM,uBAAuB,yGAelC,CAAC;AAIH,eAAO,MAAM,gBAAgB,4GAc3B,CAAC;AAIH,eAAO,MAAM,kBAAkB,yGAkB7B,CAAC;AAIH,eAAO,MAAM,oBAAoB,2GAShC,CAAC;AAIF,eAAO,MAAM,gBAAgB,uGAAa,CAAC;AAI3C,eAAO,MAAM,oBAAoB,4GA0C/B,CAAC;AAIH,eAAO,MAAM,qBAAqB,yGAIhC,CAAC;AAIH,eAAO,MAAM,qBAAqB,yGAYhC,CAAC;AAIH,eAAO,MAAM,0BAA0B,qOAuBrC,CAAC;AAIH,eAAO,MAAM,iBAAiB,yGAqC5B,CAAC;AAIH,eAAO,MAAM,cAAc,yGA6BzB,CAAC;AAIH,eAAO,MAAM,gBAAgB,4GAM3B,CAAC;AAIH,eAAO,MAAM,eAAe,yGAY1B,CAAC;AAIH,eAAO,MAAM,aAAa,yGAgBxB,CAAC;AAIH,eAAO,MAAM,gBAAgB,yGAU3B,CAAC;AAIH,eAAO,MAAM,uBAAuB,yGAOlC,CAAC;AAIH,eAAO,MAAM,uBAAuB,yGAUlC,CAAC;AAIH,eAAO,MAAM,WAAW,yGAGvB,CAAC;AAEF,eAAO,MAAM,cAAc,yGAiBzB,CAAC"}

package/lib/components/CaseView/CaseView.styles.js

@@ -1,23 +1,223 @@
 import styled, { css } from 'styled-components';
-import { defaultThemeProp } from '@pega/cosmos-react-core';
-export const StyledCaseViewContent = styled.div(({ theme, forceMobile, isMediumOrAbove, persistentUtility }) => {
+import { hideVisually, parseToHsl, readableColor, transparentize } from 'polished';
+import { Button, calculateFontSize, defaultThemeProp, StyledBreadcrumbs, StyledButton, StyledFieldValue, StyledFieldValueList, StyledIcon, StyledPopover, StyledText, StyledTooltip, tryCatch } from '@pega/cosmos-react-core';
+import { StyledMenu } from '@pega/cosmos-react-core/lib/components/Menu/Menu.styles';
+import { useCaseViewContext } from './CaseView.context';
+export const StyledCaseSummaryFields = styled.div(({ theme }) => {
+    const fontSizes = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
     return css `
-    grid-area: content;
     padding: calc(2 * ${theme.base.spacing});
 
-    ${persistentUtility &&
-        isMediumOrAbove &&
+    > ${StyledFieldValueList}:first-child {
+      grid-template-columns: 16ch auto;
+
+      ${StyledFieldValue} {
+        font-size: ${fontSizes[theme.components.text.h1['font-size']]};
+        font-weight: ${theme.components.text.h1['font-weight']};
+      }
+    }
+  `;
+});
+StyledCaseSummaryFields.defaultProps = defaultThemeProp;
+export const StyledCaseHeader = styled.header(({ theme }) => {
+    const color = tryCatch(() => readableColor(theme.base.palette['brand-primary']));
+    return css `
+    background-color: ${theme.base.palette['brand-primary']};
+    color: ${color};
+    padding: calc(2 * ${theme.base.spacing});
+    position: relative;
+
+    ${StyledMenu} {
+      color: ${theme.base.palette['foreground-color']};
+      z-index: ${theme.base['z-index'].popover + 1};
+    }
+  `;
+});
+StyledCaseHeader.defaultProps = defaultThemeProp;
+export const StyledCaseIconWrap = styled.div(({ theme }) => {
+    const spacing = theme.base.spacing;
+    const borderRadius = theme.base['border-radius'];
+    const backgroundColor = tryCatch(() => {
+        const { lightness } = parseToHsl(theme.base.palette['brand-primary']);
+        return lightness > 0.35 ? 'rgba(0, 0, 0, 0.2)' : 'rgba(255, 255, 255, 0.2)';
+    });
+    return css `
+    background: ${backgroundColor};
+    border-radius: calc(${borderRadius} / 2);
+    width: calc(5 * ${spacing});
+    height: calc(5 * ${spacing});
+    ${StyledIcon} {
+      font-size: calc(3 * ${spacing});
+      margin: auto;
+    }
+  `;
+});
+StyledCaseIconWrap.defaultProps = defaultThemeProp;
+export const StyledFollowIconWrap = styled.label `
+  font-size: 1.25rem;
+  input {
+    ${hideVisually}
+  }
+
+  input:focus + svg {
+    box-shadow: ${({ theme }) => theme.base.shadow['focus-inverted']};
+  }
+`;
+StyledFollowIconWrap.defaultProps = defaultThemeProp;
+export const StyledSubheading = styled.p ``;
+StyledSubheading.defaultProps = defaultThemeProp;
+export const StyledCaseHeaderText = styled.hgroup(({ theme }) => {
+    const color = readableColor(theme.base.palette['brand-primary']);
+    const transparentColor = tryCatch(() => transparentize(0.1, color));
+    const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
+    const idStyle = css `
+    color: ${transparentColor};
+    font-size: ${fontSize.s};
+    font-weight: normal;
+  `;
+    return css `
+    word-break: break-word;
+
+    ${StyledSubheading} {
+      ${idStyle}
+    }
+
+    ${StyledBreadcrumbs} {
+      > a,
+      > span,
+      > button,
+      > svg {
+        ${idStyle}
+      }
+
+      > a,
+      > button {
+        &:focus {
+          box-shadow: ${theme.base.shadow['focus-inverted']};
+        }
+      }
+
+      ${StyledPopover}:not(${StyledTooltip}) {
+        color: ${theme.base.palette['foreground-color']};
+      }
+    }
+
+    > ${StyledText} > ${StyledButton} {
+      color: ${color};
+    }
+  `;
+});
+StyledCaseHeaderText.defaultProps = defaultThemeProp;
+export const StyledPromotedActions = styled.div(({ theme }) => {
+    return css `
+    border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};
+  `;
+});
+StyledPromotedActions.defaultProps = defaultThemeProp;
+export const StyledCaseSummaryInfo = styled.div(() => {
+    const { intelligentGuidance } = useCaseViewContext();
+    return css `
+    overflow: auto;
+    flex: 1;
+    ${intelligentGuidance &&
+        css `
+      /* Accounts for collapsed intelligentGuidance list covering summary panel content when fully scrolled. */
+      padding-block-end: 4rem;
+    `}
+  `;
+});
+StyledCaseSummaryInfo.defaultProps = defaultThemeProp;
+export const StyledExpandCollapseButton = styled(Button)(({ theme }) => {
+    const { summaryExpanded } = useCaseViewContext();
+    return css `
+    position: absolute;
+    z-index: 1;
+    bottom: 0;
+    inset-inline-start: ${summaryExpanded ? 'calc(100% - 0.75rem)' : '0'};
+    border-radius: ${summaryExpanded ? '1.5rem' : '0 1.5rem 1.5rem 0'};
+    box-shadow: ${theme.base.shadow.low};
+    border: none;
+    opacity: 0;
+
+    &:focus {
+      opacity: 1;
+    }
+
+    ${StyledIcon} {
+      width: 1.5rem;
+      height: 1.5rem;
+      transform: rotate(${summaryExpanded ? 0 : css `180deg`});
+    }
+  `;
+});
+StyledExpandCollapseButton.defaultProps = defaultThemeProp;
+export const StyledCaseSummary = styled.div(() => {
+    const { summaryExpanded, aboveMD, aboveLG } = useCaseViewContext();
+    return css `
+    position: relative;
+    height: 100%;
+
+    ${aboveMD &&
         css `
-      margin-inline-start: calc(2 * ${theme.base.spacing});
+      ${summaryExpanded
+            ? css `
+            width: ${aboveLG ? css `25rem` : css `22rem`};
+
+            &:focus-within,
+            &:hover {
+              &::after {
+                content: '';
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                inset-inline-start: 100%;
+                width: 0.75rem;
+              }
+
+              ${StyledExpandCollapseButton} {
+                opacity: 1;
+              }
+            }
+          `
+            : css `
+            width: 100%;
+            ${StyledExpandCollapseButton} {
+              opacity: 1;
+            }
+          `}
     `}
+  `;
+});
+StyledCaseSummary.defaultProps = defaultThemeProp;
+export const StyledWorkArea = styled.div(({ theme }) => {
+    const { summaryExpanded, aboveMD, intelligentGuidance } = useCaseViewContext();
+    let pbeRem = 0;
+    if (intelligentGuidance) {
+        pbeRem = aboveMD && !summaryExpanded ? 4 : 6;
+    }
+    return css `
+    grid-area: work-area;
+    padding: calc(2 * ${theme.base.spacing});
 
-    ${!forceMobile &&
-        isMediumOrAbove &&
+    ${aboveMD &&
         css `
       padding: calc(2 * ${theme.base.spacing}) 0;
+
+      ${!summaryExpanded &&
+            css `
+        margin-inline-start: calc(2 * ${theme.base.spacing});
+      `}
+    `}
+
+    /* Order of style here is necessary for overriding styles above. */
+    ${pbeRem > 0 &&
+        css `
+      /* Accounts for collapsed intelligentGuidance bubble covering work area content when fully scrolled. */
+      padding-block-end: ${pbeRem}rem;
     `}
   `;
 });
+StyledWorkArea.defaultProps = defaultThemeProp;
 export const StyledUtilToggle = styled.button(({ theme }) => {
     return css `
     align-self: flex-end;
@@ -26,56 +226,44 @@ export const StyledUtilToggle = styled.button(({ theme }) => {
   `;
 });
 StyledUtilToggle.defaultProps = defaultThemeProp;
-export const StyledCaseViewUtilities = styled.div(({ utilitiesShown, theme }) => {
-    return css `
-      width: ${utilitiesShown ? '25rem' : 'auto'};
-      height: max-content;
-      padding: calc(2 * ${theme.base.spacing}) 0 calc(2 * ${theme.base.spacing});
-    `;
-});
-StyledCaseViewUtilities.defaultProps = defaultThemeProp;
-export const StyledCaseView = styled.div(({ theme, forceMobile, isMediumOrAbove, stickyOffset }) => {
+export const StyledUtilities = styled.div(() => {
+    const { utilitiesExpanded, aboveLG } = useCaseViewContext();
     return css `
-    --case-view-header-offset: ${stickyOffset}px;
-    --case-view-content-height: calc(100vh - var(--case-view-header-offset, 0rem));
-    min-height: calc(100vh - var(--appshell-offset, 0rem));
-    position: relative;
-    background-color: ${theme.base.palette['app-background']};
+    height: max-content;
 
-    > :last-child {
-      ${!forceMobile &&
-        isMediumOrAbove &&
+    ${aboveLG &&
+        utilitiesExpanded &&
         css `
-        margin-inline-end: calc(2 * ${theme.base.spacing});
-      `}
-    }
+      width: 25rem;
+    `}
   `;
 });
-StyledCaseView.defaultProps = defaultThemeProp;
-export const StyledSummaryRegion = styled.div(({ theme, forceMobile, desktop }) => {
+StyledUtilities.defaultProps = defaultThemeProp;
+export const StyledSummary = styled.div(({ theme }) => {
+    const { summaryExpanded, aboveMD } = useCaseViewContext();
     return css `
     position: sticky;
-    top: var(--appshell-offset, 0);
+    top: ${summaryExpanded ? 'var(--top-offset)' : 'var(--appshell-offset, 0)'};
     width: 100%;
     background-color: ${theme.base.palette['primary-background']};
     z-index: ${theme.base['z-index'].popover};
 
-    ${!forceMobile &&
-        desktop &&
+    ${aboveMD &&
+        summaryExpanded &&
         css `
-      height: var(--case-view-content-height);
+      height: var(--case-view-height);
     `}
   `;
 });
-StyledSummaryRegion.defaultProps = defaultThemeProp;
+StyledSummary.defaultProps = defaultThemeProp;
 export const StyledCaseDrawer = styled.div(({ theme }) => {
     return css `
     min-width: 21.875rem;
     max-width: 31.25rem;
     width: calc((100vw - 31.25rem) / 10 + 21.875rem);
     background-color: ${theme.base.palette['primary-background']};
-    height: var(--case-view-content-height);
-    top: var(--case-view-header-offset);
+    height: var(--case-view-height);
+    top: var(--top-offset);
     z-index: ${theme.base['z-index'].drawer - 1};
   `;
 });
@@ -89,13 +277,15 @@ export const StyledCaseDrawerContent = styled.div(({ theme }) => {
   `;
 });
 StyledCaseDrawerContent.defaultProps = defaultThemeProp;
-export const StyledPersistentUtility = styled.div(() => {
+export const StyledPersistentUtility = styled.div(({ theme }) => {
     return css `
-    max-width: 60ch;
+    min-width: ${theme.base['content-width'].sm};
+    max-width: ${theme.base['content-width'].md};
     overflow: auto;
     position: sticky;
-    height: var(--case-view-content-height);
-    top: var(--case-view-header-offset);
+    z-index: 1;
+    height: var(--case-view-height);
+    top: var(--top-offset);
   `;
 });
 StyledPersistentUtility.defaultProps = defaultThemeProp;
@@ -103,4 +293,22 @@ export const ScrollStick = styled.div `
   position: sticky;
   top: 0;
 `;
+export const StyledCaseView = styled.div(({ theme }) => {
+    const { aboveMD } = useCaseViewContext();
+    return css `
+    --top-offset: calc(var(--appshell-offset, 0rem) + var(--summary-height));
+    --case-view-height: calc(100vh - var(--top-offset));
+    position: relative;
+    min-height: var(--case-view-height);
+    background-color: ${theme.base.palette['app-background']};
+
+    ${aboveMD &&
+        css `
+      ${StyledUtilities}:last-child {
+        margin-inline-end: calc(2 * ${theme.base.spacing});
+      }
+    `}
+  `;
+});
+StyledCaseView.defaultProps = defaultThemeProp;
 //# sourceMappingURL=CaseView.styles.js.map

package/lib/components/CaseView/CaseView.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"CaseView.styles.js","sourceRoot":"","sources":["../../../src/components/CaseView/CaseView.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '@pega/cosmos-react-core';\n\nexport const StyledCaseViewContent = styled.div<{\n  forceMobile?: boolean;\n  isMediumOrAbove?: boolean;\n  persistentUtility?: boolean;\n}>(({ theme, forceMobile, isMediumOrAbove, persistentUtility }) => {\n  return css`\n    grid-area: content;\n    padding: calc(2 * ${theme.base.spacing});\n\n    ${persistentUtility &&\n    isMediumOrAbove &&\n    css`\n      margin-inline-start: calc(2 * ${theme.base.spacing});\n    `}\n\n    ${!forceMobile &&\n    isMediumOrAbove &&\n    css`\n      padding: calc(2 * ${theme.base.spacing}) 0;\n    `}\n  `;\n});\n\nexport const StyledUtilToggle = styled.button(({ theme }) => {\n  return css`\n    align-self: flex-end;\n    color: ${theme.base.palette['foreground-color']};\n    margin-inline-end: 0.375rem;\n  `;\n});\n\nStyledUtilToggle.defaultProps = defaultThemeProp;\n\nexport const StyledCaseViewUtilities = styled.div<{ utilitiesShown: boolean }>(\n  ({ utilitiesShown, theme }) => {\n    return css`\n      width: ${utilitiesShown ? '25rem' : 'auto'};\n      height: max-content;\n      padding: calc(2 * ${theme.base.spacing}) 0 calc(2 * ${theme.base.spacing});\n    `;\n  }\n);\n\nStyledCaseViewUtilities.defaultProps = defaultThemeProp;\n\nexport const StyledCaseView = styled.div<{\n  forceMobile?: boolean;\n  isMediumOrAbove?: boolean;\n  stickyOffset: number;\n}>(({ theme, forceMobile, isMediumOrAbove, stickyOffset }) => {\n  return css`\n    --case-view-header-offset: ${stickyOffset}px;\n    --case-view-content-height: calc(100vh - var(--case-view-header-offset, 0rem));\n    min-height: calc(100vh - var(--appshell-offset, 0rem));\n    position: relative;\n    background-color: ${theme.base.palette['app-background']};\n\n    > :last-child {\n      ${!forceMobile &&\n      isMediumOrAbove &&\n      css`\n        margin-inline-end: calc(2 * ${theme.base.spacing});\n      `}\n    }\n  `;\n});\n\nStyledCaseView.defaultProps = defaultThemeProp;\n\nexport const StyledSummaryRegion = styled.div<{\n  forceMobile?: boolean;\n  desktop?: boolean;\n}>(({ theme, forceMobile, desktop }) => {\n  return css`\n    position: sticky;\n    top: var(--appshell-offset, 0);\n    width: 100%;\n    background-color: ${theme.base.palette['primary-background']};\n    z-index: ${theme.base['z-index'].popover};\n\n    ${!forceMobile &&\n    desktop &&\n    css`\n      height: var(--case-view-content-height);\n    `}\n  `;\n});\n\nStyledSummaryRegion.defaultProps = defaultThemeProp;\n\nexport const StyledCaseDrawer = styled.div(({ theme }) => {\n  return css`\n    min-width: 21.875rem;\n    max-width: 31.25rem;\n    width: calc((100vw - 31.25rem) / 10 + 21.875rem);\n    background-color: ${theme.base.palette['primary-background']};\n    height: var(--case-view-content-height);\n    top: var(--case-view-header-offset);\n    z-index: ${theme.base['z-index'].drawer - 1};\n  `;\n});\n\nStyledCaseDrawer.defaultProps = defaultThemeProp;\n\nexport const StyledCaseDrawerContent = styled.div(({ theme }) => {\n  return css`\n    background-color: ${theme.base.palette['app-background']};\n    padding: calc(2 * ${theme.base.spacing});\n    height: 100%;\n    overflow: auto;\n  `;\n});\n\nStyledCaseDrawerContent.defaultProps = defaultThemeProp;\n\nexport const StyledPersistentUtility = styled.div(() => {\n  return css`\n    max-width: 60ch;\n    overflow: auto;\n    position: sticky;\n    height: var(--case-view-content-height);\n    top: var(--case-view-header-offset);\n  `;\n});\n\nStyledPersistentUtility.defaultProps = defaultThemeProp;\n\nexport const ScrollStick = styled.div`\n  position: sticky;\n  top: 0;\n`;\n"]}
+{"version":3,"file":"CaseView.styles.js","sourceRoot":"","sources":["../../../src/components/CaseView/CaseView.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { hideVisually, parseToHsl, readableColor, transparentize } from 'polished';\n\nimport {\n  Button,\n  calculateFontSize,\n  defaultThemeProp,\n  StyledBreadcrumbs,\n  StyledButton,\n  StyledFieldValue,\n  StyledFieldValueList,\n  StyledIcon,\n  StyledPopover,\n  StyledText,\n  StyledTooltip,\n  tryCatch,\n  FontSize\n} from '@pega/cosmos-react-core';\nimport { StyledMenu } from '@pega/cosmos-react-core/lib/components/Menu/Menu.styles';\n\nimport { useCaseViewContext } from './CaseView.context';\n\nexport const StyledCaseSummaryFields = styled.div(({ theme }) => {\n  const fontSizes = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n  return css`\n    padding: calc(2 * ${theme.base.spacing});\n\n    > ${StyledFieldValueList}:first-child {\n      grid-template-columns: 16ch auto;\n\n      ${StyledFieldValue} {\n        font-size: ${fontSizes[theme.components.text.h1['font-size'] as FontSize]};\n        font-weight: ${theme.components.text.h1['font-weight']};\n      }\n    }\n  `;\n});\n\nStyledCaseSummaryFields.defaultProps = defaultThemeProp;\n\nexport const StyledCaseHeader = styled.header(({ theme }) => {\n  const color = tryCatch(() => readableColor(theme.base.palette['brand-primary']));\n\n  return css`\n    background-color: ${theme.base.palette['brand-primary']};\n    color: ${color};\n    padding: calc(2 * ${theme.base.spacing});\n    position: relative;\n\n    ${StyledMenu} {\n      color: ${theme.base.palette['foreground-color']};\n      z-index: ${theme.base['z-index'].popover + 1};\n    }\n  `;\n});\n\nStyledCaseHeader.defaultProps = defaultThemeProp;\n\nexport const StyledCaseIconWrap = styled.div(({ theme }) => {\n  const spacing = theme.base.spacing;\n  const borderRadius = theme.base['border-radius'];\n  const backgroundColor = tryCatch(() => {\n    const { lightness } = parseToHsl(theme.base.palette['brand-primary']);\n    return lightness > 0.35 ? 'rgba(0, 0, 0, 0.2)' : 'rgba(255, 255, 255, 0.2)';\n  });\n\n  return css`\n    background: ${backgroundColor};\n    border-radius: calc(${borderRadius} / 2);\n    width: calc(5 * ${spacing});\n    height: calc(5 * ${spacing});\n    ${StyledIcon} {\n      font-size: calc(3 * ${spacing});\n      margin: auto;\n    }\n  `;\n});\n\nStyledCaseIconWrap.defaultProps = defaultThemeProp;\n\nexport const StyledFollowIconWrap = styled.label`\n  font-size: 1.25rem;\n  input {\n    ${hideVisually}\n  }\n\n  input:focus + svg {\n    box-shadow: ${({ theme }) => theme.base.shadow['focus-inverted']};\n  }\n`;\n\nStyledFollowIconWrap.defaultProps = defaultThemeProp;\n\nexport const StyledSubheading = styled.p``;\n\nStyledSubheading.defaultProps = defaultThemeProp;\n\nexport const StyledCaseHeaderText = styled.hgroup(({ theme }) => {\n  const color = readableColor(theme.base.palette['brand-primary']);\n  const transparentColor = tryCatch(() => transparentize(0.1, color));\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n  const idStyle = css`\n    color: ${transparentColor};\n    font-size: ${fontSize.s};\n    font-weight: normal;\n  `;\n\n  return css`\n    word-break: break-word;\n\n    ${StyledSubheading} {\n      ${idStyle}\n    }\n\n    ${StyledBreadcrumbs} {\n      > a,\n      > span,\n      > button,\n      > svg {\n        ${idStyle}\n      }\n\n      > a,\n      > button {\n        &:focus {\n          box-shadow: ${theme.base.shadow['focus-inverted']};\n        }\n      }\n\n      ${StyledPopover}:not(${StyledTooltip}) {\n        color: ${theme.base.palette['foreground-color']};\n      }\n    }\n\n    > ${StyledText} > ${StyledButton} {\n      color: ${color};\n    }\n  `;\n});\n\nStyledCaseHeaderText.defaultProps = defaultThemeProp;\n\nexport const StyledPromotedActions = styled.div(({ theme }) => {\n  return css`\n    border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n  `;\n});\n\nStyledPromotedActions.defaultProps = defaultThemeProp;\n\nexport const StyledCaseSummaryInfo = styled.div(() => {\n  const { intelligentGuidance } = useCaseViewContext();\n\n  return css`\n    overflow: auto;\n    flex: 1;\n    ${intelligentGuidance &&\n    css`\n      /* Accounts for collapsed intelligentGuidance list covering summary panel content when fully scrolled. */\n      padding-block-end: 4rem;\n    `}\n  `;\n});\n\nStyledCaseSummaryInfo.defaultProps = defaultThemeProp;\n\nexport const StyledExpandCollapseButton = styled(Button)(({ theme }) => {\n  const { summaryExpanded } = useCaseViewContext();\n\n  return css`\n    position: absolute;\n    z-index: 1;\n    bottom: 0;\n    inset-inline-start: ${summaryExpanded ? 'calc(100% - 0.75rem)' : '0'};\n    border-radius: ${summaryExpanded ? '1.5rem' : '0 1.5rem 1.5rem 0'};\n    box-shadow: ${theme.base.shadow.low};\n    border: none;\n    opacity: 0;\n\n    &:focus {\n      opacity: 1;\n    }\n\n    ${StyledIcon} {\n      width: 1.5rem;\n      height: 1.5rem;\n      transform: rotate(${summaryExpanded ? 0 : css`180deg`});\n    }\n  `;\n});\n\nStyledExpandCollapseButton.defaultProps = defaultThemeProp;\n\nexport const StyledCaseSummary = styled.div(() => {\n  const { summaryExpanded, aboveMD, aboveLG } = useCaseViewContext();\n\n  return css`\n    position: relative;\n    height: 100%;\n\n    ${aboveMD &&\n    css`\n      ${summaryExpanded\n        ? css`\n            width: ${aboveLG ? css`25rem` : css`22rem`};\n\n            &:focus-within,\n            &:hover {\n              &::after {\n                content: '';\n                position: absolute;\n                top: 0;\n                bottom: 0;\n                inset-inline-start: 100%;\n                width: 0.75rem;\n              }\n\n              ${StyledExpandCollapseButton} {\n                opacity: 1;\n              }\n            }\n          `\n        : css`\n            width: 100%;\n            ${StyledExpandCollapseButton} {\n              opacity: 1;\n            }\n          `}\n    `}\n  `;\n});\n\nStyledCaseSummary.defaultProps = defaultThemeProp;\n\nexport const StyledWorkArea = styled.div(({ theme }) => {\n  const { summaryExpanded, aboveMD, intelligentGuidance } = useCaseViewContext();\n  let pbeRem = 0;\n\n  if (intelligentGuidance) {\n    pbeRem = aboveMD && !summaryExpanded ? 4 : 6;\n  }\n\n  return css`\n    grid-area: work-area;\n    padding: calc(2 * ${theme.base.spacing});\n\n    ${aboveMD &&\n    css`\n      padding: calc(2 * ${theme.base.spacing}) 0;\n\n      ${!summaryExpanded &&\n      css`\n        margin-inline-start: calc(2 * ${theme.base.spacing});\n      `}\n    `}\n\n    /* Order of style here is necessary for overriding styles above. */\n    ${pbeRem > 0 &&\n    css`\n      /* Accounts for collapsed intelligentGuidance bubble covering work area content when fully scrolled. */\n      padding-block-end: ${pbeRem}rem;\n    `}\n  `;\n});\n\nStyledWorkArea.defaultProps = defaultThemeProp;\n\nexport const StyledUtilToggle = styled.button(({ theme }) => {\n  return css`\n    align-self: flex-end;\n    color: ${theme.base.palette['foreground-color']};\n    margin-inline-end: 0.375rem;\n  `;\n});\n\nStyledUtilToggle.defaultProps = defaultThemeProp;\n\nexport const StyledUtilities = styled.div(() => {\n  const { utilitiesExpanded, aboveLG } = useCaseViewContext();\n\n  return css`\n    height: max-content;\n\n    ${aboveLG &&\n    utilitiesExpanded &&\n    css`\n      width: 25rem;\n    `}\n  `;\n});\n\nStyledUtilities.defaultProps = defaultThemeProp;\n\nexport const StyledSummary = styled.div(({ theme }) => {\n  const { summaryExpanded, aboveMD } = useCaseViewContext();\n\n  return css`\n    position: sticky;\n    top: ${summaryExpanded ? 'var(--top-offset)' : 'var(--appshell-offset, 0)'};\n    width: 100%;\n    background-color: ${theme.base.palette['primary-background']};\n    z-index: ${theme.base['z-index'].popover};\n\n    ${aboveMD &&\n    summaryExpanded &&\n    css`\n      height: var(--case-view-height);\n    `}\n  `;\n});\n\nStyledSummary.defaultProps = defaultThemeProp;\n\nexport const StyledCaseDrawer = styled.div(({ theme }) => {\n  return css`\n    min-width: 21.875rem;\n    max-width: 31.25rem;\n    width: calc((100vw - 31.25rem) / 10 + 21.875rem);\n    background-color: ${theme.base.palette['primary-background']};\n    height: var(--case-view-height);\n    top: var(--top-offset);\n    z-index: ${theme.base['z-index'].drawer - 1};\n  `;\n});\n\nStyledCaseDrawer.defaultProps = defaultThemeProp;\n\nexport const StyledCaseDrawerContent = styled.div(({ theme }) => {\n  return css`\n    background-color: ${theme.base.palette['app-background']};\n    padding: calc(2 * ${theme.base.spacing});\n    height: 100%;\n    overflow: auto;\n  `;\n});\n\nStyledCaseDrawerContent.defaultProps = defaultThemeProp;\n\nexport const StyledPersistentUtility = styled.div(({ theme }) => {\n  return css`\n    min-width: ${theme.base['content-width'].sm};\n    max-width: ${theme.base['content-width'].md};\n    overflow: auto;\n    position: sticky;\n    z-index: 1;\n    height: var(--case-view-height);\n    top: var(--top-offset);\n  `;\n});\n\nStyledPersistentUtility.defaultProps = defaultThemeProp;\n\nexport const ScrollStick = styled.div`\n  position: sticky;\n  top: 0;\n`;\n\nexport const StyledCaseView = styled.div(({ theme }) => {\n  const { aboveMD } = useCaseViewContext();\n\n  return css`\n    --top-offset: calc(var(--appshell-offset, 0rem) + var(--summary-height));\n    --case-view-height: calc(100vh - var(--top-offset));\n    position: relative;\n    min-height: var(--case-view-height);\n    background-color: ${theme.base.palette['app-background']};\n\n    ${aboveMD &&\n    css`\n      ${StyledUtilities}:last-child {\n        margin-inline-end: calc(2 * ${theme.base.spacing});\n      }\n    `}\n  `;\n});\n\nStyledCaseView.defaultProps = defaultThemeProp;\n"]}

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

@@ -0,0 +1,103 @@
+import { ReactElement, ReactNode, MouseEvent } from 'react';
+import { Tab, NoChildrenProp, ForwardProps, MenuItemProps, Action, BaseProps } from '@pega/cosmos-react-core';
+export interface CaseViewProps extends NoChildrenProp, BaseProps {
+    /** A unique identifier for the case instance. */
+    caseId: string;
+    /** Text to quickly identify a case instance. */
+    heading: string;
+    /** Supplemental text to identify a case instance. */
+    subheading?: string;
+    /** A set of props including an href that will be forwarded to the case heading and caseId. */
+    caseLink?: {
+        href: string;
+    } & ForwardProps;
+    /** A set of Link props representing the case parents, rendered as Breadcrumbs. */
+    parentCases?: MenuItemProps[];
+    /** An icon to serve as a visual for the CaseView. */
+    icon?: ReactElement;
+    /** Indicates if the current user is following the case. This should be updated based on onFollowedChange.  */
+    followed?: boolean;
+    /** Called when user chooses to follow or unfollow the case. Use this to update followed. */
+    onFollowedChange?: (following: boolean) => void;
+    /** Case level actions available in an action menu. */
+    actions?: Action[];
+    /** Visually promoted case level actions available outside the menu. */
+    promotedActions?: Action[];
+    /** A callback for when the edit button is clicked */
+    onEdit?: () => void;
+    /** A region to display any summary information about the CaseView. */
+    summary: ReactNode;
+    /**
+     * Determines the layout state of the summary region.
+     * @default true
+     */
+    summaryExpanded?: boolean;
+    /**
+     * Callback to toggle the case summary's layout.
+     */
+    onToggleSummary?: () => void;
+    /** An object handling the rendering and functionality of the Tabs in CaseSummary. */
+    tabs: {
+        items: Tab[];
+        onClick: (id: string, event?: MouseEvent<HTMLAnchorElement | HTMLButtonElement>) => void;
+        currentTabId: string;
+    };
+    /** A region within the center column that is controlled by tabs in CaseSummary. */
+    tabContent?: {
+        content: ReactNode;
+        id: string;
+    }[];
+    /** A region to hold a Stages component. */
+    stages?: ReactNode;
+    /** A region to hold a Tasks component. */
+    tasks?: ReactNode;
+    /** A region above the center column to display banners. */
+    banners?: ReactNode;
+    /** A region to the right reserved for persistent utilities. */
+    persistentUtility?: {
+        content: ReactNode;
+        title: string;
+    };
+    /**
+     * Provide an instance of IntelligentGuidance to be rendered for a case.
+     */
+    intelligentGuidance?: ReactNode;
+    /** A region for case widgets. */
+    utilities?: ReactNode;
+    /** An indicator of case widgets when the utilities are collapsed. */
+    utilitiesSummaryItems?: {
+        iconName: string;
+        count?: number;
+    }[];
+    /**
+     * Determines the layout state of the utilities.
+     * @default true
+     */
+    utilitiesExpanded?: boolean;
+    /**
+     * Callback to toggle the utilities.
+     */
+    onToggleUtilities?: () => void;
+}
+export interface CaseSummaryFieldsProps {
+    /** The primary summary fields to display above secondary fields. */
+    primaryFields: {
+        id?: string;
+        name: string;
+        value: ReactNode;
+    }[];
+    /** The secondary summary fields to display below primary fields. */
+    secondaryFields: {
+        id?: string;
+        name: string;
+        value: ReactNode;
+    }[];
+}
+export interface CaseViewContextValue extends Pick<CaseViewProps, 'caseId' | 'heading' | 'subheading' | 'caseLink' | 'parentCases' | 'icon' | 'followed' | 'onFollowedChange' | 'actions' | 'promotedActions' | 'onEdit' | 'summary' | 'tabs' | 'summaryExpanded' | 'onToggleSummary' | 'utilitiesExpanded' | 'persistentUtility' | 'intelligentGuidance'> {
+    summaryId: string;
+    aboveMD: boolean;
+    aboveLG: boolean;
+    aboveXL: boolean;
+    isPreview: boolean;
+}
+//# sourceMappingURL=CaseView.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CaseView.types.d.ts","sourceRoot":"","sources":["../../../src/components/CaseView/CaseView.types.ts"],"names":[],"mappings":"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"}

package/lib/components/CaseView/CaseView.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=CaseView.types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CaseView.types.js","sourceRoot":"","sources":["../../../src/components/CaseView/CaseView.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ReactElement, ReactNode, MouseEvent } from 'react';\n\nimport {\n  Tab,\n  NoChildrenProp,\n  ForwardProps,\n  MenuItemProps,\n  Action,\n  BaseProps\n} from '@pega/cosmos-react-core';\n\nexport interface CaseViewProps extends NoChildrenProp, BaseProps {\n  /** A unique identifier for the case instance. */\n  caseId: string;\n  /** Text to quickly identify a case instance. */\n  heading: string;\n  /** Supplemental text to identify a case instance. */\n  subheading?: string;\n  /** A set of props including an href that will be forwarded to the case heading and caseId. */\n  caseLink?: { href: string } & ForwardProps;\n  /** A set of Link props representing the case parents, rendered as Breadcrumbs. */\n  parentCases?: MenuItemProps[];\n  /** An icon to serve as a visual for the CaseView. */\n  icon?: ReactElement;\n  /** Indicates if the current user is following the case. This should be updated based on onFollowedChange.  */\n  followed?: boolean;\n  /** Called when user chooses to follow or unfollow the case. Use this to update followed. */\n  onFollowedChange?: (following: boolean) => void;\n  /** Case level actions available in an action menu. */\n  actions?: Action[];\n  /** Visually promoted case level actions available outside the menu. */\n  promotedActions?: Action[];\n  /** A callback for when the edit button is clicked */\n  onEdit?: () => void;\n\n  /** A region to display any summary information about the CaseView. */\n  summary: ReactNode;\n  /**\n   * Determines the layout state of the summary region.\n   * @default true\n   */\n  summaryExpanded?: boolean;\n  /**\n   * Callback to toggle the case summary's layout.\n   */\n  onToggleSummary?: () => void;\n\n  /** An object handling the rendering and functionality of the Tabs in CaseSummary. */\n  tabs: {\n    items: Tab[];\n    onClick: (id: string, event?: MouseEvent<HTMLAnchorElement | HTMLButtonElement>) => void;\n    currentTabId: string;\n  };\n  /** A region within the center column that is controlled by tabs in CaseSummary. */\n  tabContent?: { content: ReactNode; id: string }[];\n\n  /** A region to hold a Stages component. */\n  stages?: ReactNode;\n  /** A region to hold a Tasks component. */\n  tasks?: ReactNode;\n  /** A region above the center column to display banners. */\n  banners?: ReactNode;\n  /** A region to the right reserved for persistent utilities. */\n  persistentUtility?: { content: ReactNode; title: string };\n  /**\n   * Provide an instance of IntelligentGuidance to be rendered for a case.\n   */\n  intelligentGuidance?: ReactNode;\n\n  /** A region for case widgets. */\n  utilities?: ReactNode;\n  /** An indicator of case widgets when the utilities are collapsed. */\n  utilitiesSummaryItems?: { iconName: string; count?: number }[];\n\n  /**\n   * Determines the layout state of the utilities.\n   * @default true\n   */\n  utilitiesExpanded?: boolean;\n  /**\n   * Callback to toggle the utilities.\n   */\n  onToggleUtilities?: () => void;\n  /**\n   * Indicates CaseView is rendered within a CasePreview.\n   * @internal\n   */\n  isPreview?: boolean;\n}\n\nexport interface CaseSummaryFieldsProps {\n  /** The primary summary fields to display above secondary fields. */\n  primaryFields: {\n    id?: string;\n    name: string;\n    value: ReactNode;\n  }[];\n  /** The secondary summary fields to display below primary fields. */\n  secondaryFields: {\n    id?: string;\n    name: string;\n    value: ReactNode;\n  }[];\n}\n\nexport interface CaseViewContextValue\n  extends Pick<\n    CaseViewProps,\n    | 'caseId'\n    | 'heading'\n    | 'subheading'\n    | 'caseLink'\n    | 'parentCases'\n    | 'icon'\n    | 'followed'\n    | 'onFollowedChange'\n    | 'actions'\n    | 'promotedActions'\n    | 'onEdit'\n    | 'summary'\n    | 'tabs'\n    | 'summaryExpanded'\n    | 'onToggleSummary'\n    | 'utilitiesExpanded'\n    | 'persistentUtility'\n    | 'intelligentGuidance'\n  > {\n  summaryId: string;\n  aboveMD: boolean;\n  aboveLG: boolean;\n  aboveXL: boolean;\n  isPreview: boolean;\n}\n"]}

package/lib/components/CaseView/UtilitiesSummary.d.ts

@@ -1,12 +1,10 @@
 import { FunctionComponent } from 'react';
-import { ForwardProps } from '@pega/cosmos-react-core';
+import { CaseViewProps } from './CaseView.types';
 export interface UtilitiesSummaryProps {
-    items: {
-        iconName: string;
-        count?: number;
-    }[];
+    items?: CaseViewProps['utilitiesSummaryItems'];
+    onClick?: () => void;
 }
 export declare const StyledUtilitiesSummary: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-declare const UtilitiesSummary: FunctionComponent<UtilitiesSummaryProps & ForwardProps>;
+declare const UtilitiesSummary: FunctionComponent<UtilitiesSummaryProps>;
 export default UtilitiesSummary;
 //# sourceMappingURL=UtilitiesSummary.d.ts.map

package/lib/components/CaseView/UtilitiesSummary.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UtilitiesSummary.d.ts","sourceRoot":"","sources":["../../../src/components/CaseView/UtilitiesSummary.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAG1C,OAAO,EAA2B,YAAY,EAAW,MAAM,yBAAyB,CAAC;AAEzF,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE;QAAE,QAAQ,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;CAC/C;AAED,eAAO,MAAM,sBAAsB,yGAKjC,CAAC;AAEH,QAAA,MAAM,gBAAgB,EAAE,iBAAiB,CAAC,qBAAqB,GAAG,YAAY,CAiC7E,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"UtilitiesSummary.d.ts","sourceRoot":"","sources":["../../../src/components/CaseView/UtilitiesSummary.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAiB,MAAM,OAAO,CAAC;AAKzD,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEjD,MAAM,WAAW,qBAAqB;IACpC,KAAK,CAAC,EAAE,aAAa,CAAC,uBAAuB,CAAC,CAAC;IAC/C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,eAAO,MAAM,sBAAsB,yGAMjC,CAAC;AAEH,QAAA,MAAM,gBAAgB,EAAE,iBAAiB,CAAC,qBAAqB,CAiC9D,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/lib/components/CaseView/UtilitiesSummary.js

@@ -5,11 +5,15 @@ export const StyledUtilitiesSummary = styled.div(({ theme }) => {
     return css `
     width: 2.75rem;
     padding: ${theme.base.spacing} 0;
+    cursor: pointer;
   `;
 });
-const UtilitiesSummary = ({ items = [], ...restProps }) => {
+const UtilitiesSummary = ({ items = [], onClick }) => {
     const t = useI18n();
-    return items.length ? (_jsx(Card, { ...restProps, interactive: true, tabIndex: 0, role: 'button', container: { direction: 'column', alignItems: 'center', gap: 3 }, "aria-label": `${t('utilities_summary')}. ${t('expand_utilities_panel')}`, as: StyledUtilitiesSummary, children: items.map(item => {
+    return items.length ? (_jsx(Card, { interactive: true, tabIndex: 0, role: 'button', container: { direction: 'column', alignItems: 'center', gap: 3 }, "aria-label": `${t('utilities_summary')}. ${t('expand_utilities_panel')}`, as: StyledUtilitiesSummary, onClick: onClick, onKeyDown: (e) => {
+            if (e.key === ' ' || e.key === 'Enter')
+                onClick?.();
+        }, children: items.map(item => {
             return (_jsxs(Flex, { container: {
                     direction: 'column',
                     alignItems: 'center',

package/lib/components/CaseView/UtilitiesSummary.js.map

@@ -1 +1 @@
-{"version":3,"file":"UtilitiesSummary.js","sourceRoot":"","sources":["../../../src/components/CaseView/UtilitiesSummary.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAgB,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAMzF,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC7D,OAAO,GAAG,CAAA;;eAEG,KAAK,CAAC,IAAI,CAAC,OAAO;GAC9B,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,gBAAgB,GAA4D,CAAC,EACjF,KAAK,GAAG,EAAE,EACV,GAAG,SAAS,EACU,EAAE,EAAE;IAC1B,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,OAAO,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CACpB,KAAC,IAAI,OACC,SAAS,EACb,WAAW,QACX,QAAQ,EAAE,CAAC,EACX,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,gBACpD,GAAG,CAAC,CAAC,mBAAmB,CAAC,KAAK,CAAC,CAAC,wBAAwB,CAAC,EAAE,EACvE,EAAE,EAAE,sBAAsB,YAEzB,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;YAChB,OAAO,CACL,MAAC,IAAI,IACH,SAAS,EAAE;oBACT,SAAS,EAAE,QAAQ;oBACnB,UAAU,EAAE,QAAQ;oBACpB,GAAG,EAAE,GAAG;iBACT,EACD,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,aAGjB,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,CAAC,QAAQ,GAAI,EAC5B,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,KAAC,KAAK,IAAC,OAAO,EAAC,SAAS,YAAE,IAAI,CAAC,KAAK,GAAS,KAHrE,IAAI,CAAC,QAAQ,CAIb,CACR,CAAC;QACJ,CAAC,CAAC,GACG,CACR,CAAC,CAAC,CAAC,IAAI,CAAC;AACX,CAAC,CAAC;AAEF,eAAe,gBAAgB,CAAC","sourcesContent":["import { FunctionComponent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Card, Count, Flex, Icon, ForwardProps, useI18n } from '@pega/cosmos-react-core';\n\nexport interface UtilitiesSummaryProps {\n  items: { iconName: string; count?: number }[];\n}\n\nexport const StyledUtilitiesSummary = styled.div(({ theme }) => {\n  return css`\n    width: 2.75rem;\n    padding: ${theme.base.spacing} 0;\n  `;\n});\n\nconst UtilitiesSummary: FunctionComponent<UtilitiesSummaryProps & ForwardProps> = ({\n  items = [],\n  ...restProps\n}: UtilitiesSummaryProps) => {\n  const t = useI18n();\n  return items.length ? (\n    <Card\n      {...restProps}\n      interactive\n      tabIndex={0}\n      role='button'\n      container={{ direction: 'column', alignItems: 'center', gap: 3 }}\n      aria-label={`${t('utilities_summary')}. ${t('expand_utilities_panel')}`}\n      as={StyledUtilitiesSummary}\n    >\n      {items.map(item => {\n        return (\n          <Flex\n            container={{\n              direction: 'column',\n              alignItems: 'center',\n              gap: 0.5\n            }}\n            item={{ grow: 1 }}\n            key={item.iconName}\n          >\n            <Icon name={item.iconName} />\n            {item.count !== undefined && <Count variant='default'>{item.count}</Count>}\n          </Flex>\n        );\n      })}\n    </Card>\n  ) : null;\n};\n\nexport default UtilitiesSummary;\n"]}
+{"version":3,"file":"UtilitiesSummary.js","sourceRoot":"","sources":["../../../src/components/CaseView/UtilitiesSummary.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAS3E,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC7D,OAAO,GAAG,CAAA;;eAEG,KAAK,CAAC,IAAI,CAAC,OAAO;;GAE9B,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,gBAAgB,GAA6C,CAAC,EAAE,KAAK,GAAG,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE;IAC7F,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,OAAO,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CACpB,KAAC,IAAI,IACH,WAAW,QACX,QAAQ,EAAE,CAAC,EACX,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,gBACpD,GAAG,CAAC,CAAC,mBAAmB,CAAC,KAAK,CAAC,CAAC,wBAAwB,CAAC,EAAE,EACvE,EAAE,EAAE,sBAAsB,EAC1B,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,CAAC,CAAgC,EAAE,EAAE;YAC9C,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO;gBAAE,OAAO,EAAE,EAAE,CAAC;QACtD,CAAC,YAEA,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;YAChB,OAAO,CACL,MAAC,IAAI,IACH,SAAS,EAAE;oBACT,SAAS,EAAE,QAAQ;oBACnB,UAAU,EAAE,QAAQ;oBACpB,GAAG,EAAE,GAAG;iBACT,EACD,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,aAGjB,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,CAAC,QAAQ,GAAI,EAC5B,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,KAAC,KAAK,IAAC,OAAO,EAAC,SAAS,YAAE,IAAI,CAAC,KAAK,GAAS,KAHrE,IAAI,CAAC,QAAQ,CAIb,CACR,CAAC;QACJ,CAAC,CAAC,GACG,CACR,CAAC,CAAC,CAAC,IAAI,CAAC;AACX,CAAC,CAAC;AAEF,eAAe,gBAAgB,CAAC","sourcesContent":["import { FunctionComponent, KeyboardEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Card, Count, Flex, Icon, useI18n } from '@pega/cosmos-react-core';\n\nimport { CaseViewProps } from './CaseView.types';\n\nexport interface UtilitiesSummaryProps {\n  items?: CaseViewProps['utilitiesSummaryItems'];\n  onClick?: () => void;\n}\n\nexport const StyledUtilitiesSummary = styled.div(({ theme }) => {\n  return css`\n    width: 2.75rem;\n    padding: ${theme.base.spacing} 0;\n    cursor: pointer;\n  `;\n});\n\nconst UtilitiesSummary: FunctionComponent<UtilitiesSummaryProps> = ({ items = [], onClick }) => {\n  const t = useI18n();\n  return items.length ? (\n    <Card\n      interactive\n      tabIndex={0}\n      role='button'\n      container={{ direction: 'column', alignItems: 'center', gap: 3 }}\n      aria-label={`${t('utilities_summary')}. ${t('expand_utilities_panel')}`}\n      as={StyledUtilitiesSummary}\n      onClick={onClick}\n      onKeyDown={(e: KeyboardEvent<HTMLDivElement>) => {\n        if (e.key === ' ' || e.key === 'Enter') onClick?.();\n      }}\n    >\n      {items.map(item => {\n        return (\n          <Flex\n            container={{\n              direction: 'column',\n              alignItems: 'center',\n              gap: 0.5\n            }}\n            item={{ grow: 1 }}\n            key={item.iconName}\n          >\n            <Icon name={item.iconName} />\n            {item.count !== undefined && <Count variant='default'>{item.count}</Count>}\n          </Flex>\n        );\n      })}\n    </Card>\n  ) : null;\n};\n\nexport default UtilitiesSummary;\n"]}