npm - @pega/cosmos-react-work - Versions diffs - 3.0.0-dev.22.0 → 3.0.0-dev.23.2 - Mend

@pega/cosmos-react-work 3.0.0-dev.22.0 → 3.0.0-dev.23.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (71) hide show

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

@@ -1,23 +1,19 @@
-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 StyledCaseHeaderText: import("styled-components").StyledComponent<"div", 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 CHANGED Viewed

	@@ -1 +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,~~yGASlC~~,CAAC;AAIH,eAAO,MAAM,WAAW,yGAGvB,CAAC"}
1	+ {"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,oBAAoB,yGAiC/B,CAAC;AAIH,eAAO,MAAM,qBAAqB,yGAIhC,CAAC;AAIH,eAAO,MAAM,qBAAqB,yGAKhC,CAAC;AAIH,eAAO,MAAM,0BAA0B,qOA0BrC,CAAC;AAIH,eAAO,MAAM,iBAAiB,yGAqC5B,CAAC;AAIH,eAAO,MAAM,cAAc,yGAiBzB,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 CHANGED Viewed

@@ -1,23 +1,200 @@
 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 StyledCaseHeaderText = styled.div(({ theme }) => {
+    const color = readableColor(theme.base.palette['brand-primary']);
+    const transparentColor = tryCatch(() => transparentize(0.2, color));
+    const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
+    return css `
+    word-break: break-word;
+    ${StyledBreadcrumbs} {
+      > a,
+      > span,
+      > button,
+      > svg {
+        color: ${transparentColor};
+        font-size: ${fontSize.s};
+        font-weight: normal;
+      }
+      > 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(() => {
+    return css `
+    overflow: auto;
+    flex: 1;
+  `;
+});
+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;
+    /* Disbales core Button transition causing button to slide on toggle. */
+    transition: none;
+    &: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 } = useCaseViewContext();
+    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});
+      `}
     `}
   `;
 });
+StyledWorkArea.defaultProps = defaultThemeProp;
 export const StyledUtilToggle = styled.button(({ theme }) => {
     return css `
     align-self: flex-end;
@@ -26,56 +203,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)'};
     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,14 +254,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;
     z-index: 1;
-    height: var(--case-view-content-height);
-    top: var(--case-view-header-offset);
+    height: var(--case-view-height);
+    top: var(--top-offset);
   `;
 });
 StyledPersistentUtility.defaultProps = defaultThemeProp;
@@ -104,4 +270,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, 0) + 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 CHANGED Viewed

	@@ -1 +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 z-index: 1;\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"]}
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';\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 StyledCaseHeaderText = styled.div(({ theme }) => {\n const color = readableColor(theme.base.palette['brand-primary']);\n const transparentColor = tryCatch(() => transparentize(0.2, color));\n const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n return css`\n word-break: break-word;\n\n ${StyledBreadcrumbs} {\n > a,\n > span,\n > button,\n > svg {\n color: ${transparentColor};\n font-size: ${fontSize.s};\n font-weight: normal;\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 return css`\n overflow: auto;\n flex: 1;\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 /* Disbales core Button transition causing button to slide on toggle. /\n transition: none;\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 } = useCaseViewContext();\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});\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)'};\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, 0) + 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 ADDED Viewed

@@ -0,0 +1,100 @@
+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 Case ID to display in the heading. */
+    caseId: string;
+    /** A text region for the title of the CaseView. */
+    heading: 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;
+    };
+    /** 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;
+    /**
+     * Indicates CaseView is rendered within a CasePreview.
+     */
+    isPreview?: boolean;
+}
+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' | 'caseLink' | 'parentCases' | 'icon' | 'followed' | 'onFollowedChange' | 'actions' | 'promotedActions' | 'onEdit' | 'summary' | 'tabs' | 'isPreview' | 'summaryExpanded' | 'onToggleSummary' | 'utilitiesExpanded' | 'persistentUtility'> {
+    summaryId: string;
+    aboveMD: boolean;
+    aboveLG: boolean;
+    aboveXL: boolean;
+}
+//# sourceMappingURL=CaseView.types.d.ts.map

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

@@ -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 ADDED Viewed

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

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

@@ -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 Case ID to display in the heading. */\n caseId: string;\n /** A text region for the title of the CaseView. */\n heading: 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 /** 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 */\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 | 'caseLink'\n | 'parentCases'\n | 'icon'\n | 'followed'\n | 'onFollowedChange'\n | 'actions'\n | 'promotedActions'\n | 'onEdit'\n | 'summary'\n | 'tabs'\n | 'isPreview'\n | 'summaryExpanded'\n | 'onToggleSummary'\n | 'utilitiesExpanded'\n | 'persistentUtility'\n > {\n summaryId: string;\n aboveMD: boolean;\n aboveLG: boolean;\n aboveXL: boolean;\n}\n"]}

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

@@ -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 CHANGED Viewed

	@@ -1 +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"}
1	+ {"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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"]}
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,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"]}

package/lib/components/CaseView/index.d.ts CHANGED Viewed

@@ -1,6 +1,9 @@
 export { default } from './CaseView';
-export { CaseViewProps } from './CaseView';
-export { StyledCaseView, StyledCaseViewContent, StyledCaseDrawer, StyledCaseDrawerContent, StyledSummaryRegion } from './CaseView.styles';
+export { CaseViewProps } from './CaseView.types';
+export { StyledCaseView, StyledWorkArea as StyledCaseViewContent, StyledCaseDrawer, StyledCaseDrawerContent, StyledSummary as StyledSummaryRegion } from './CaseView.styles';
 export { default as MobileCaseView } from './MobileCaseView';
 export { MobileCaseViewProps } from './MobileCaseView';
+export { default as CaseSummary } from './CaseSummary';
+export { default as CaseSummaryFields } from './CaseSummaryFields';
+export { default as CaseHeader } from './CaseHeader';
 //# sourceMappingURL=index.d.ts.map

package/lib/components/CaseView/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/CaseView/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,aAAa,EAAE,MAAM,~~YAAY~~,CAAC;~~AAC3C~~,OAAO,EACL,cAAc,EACd,qBAAqB,~~EACrB~~,gBAAgB,EAChB,uBAAuB,EACvB,mBAAmB,~~EACpB~~,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/CaseView/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EACL,cAAc,EACd,cAAc,IAAI,qBAAqB,EACvC,gBAAgB,EAChB,uBAAuB,EACvB,aAAa,IAAI,mBAAmB,EACrC,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC"}

package/lib/components/CaseView/index.js CHANGED Viewed

@@ -1,4 +1,7 @@
 export { default } from './CaseView';
-export { StyledCaseView, StyledCaseViewContent, StyledCaseDrawer, StyledCaseDrawerContent, StyledSummaryRegion } from './CaseView.styles';
+export { StyledCaseView, StyledWorkArea as StyledCaseViewContent, StyledCaseDrawer, StyledCaseDrawerContent, StyledSummary as StyledSummaryRegion } from './CaseView.styles';
 export { default as MobileCaseView } from './MobileCaseView';
+export { default as CaseSummary } from './CaseSummary';
+export { default as CaseSummaryFields } from './CaseSummaryFields';
+export { default as CaseHeader } from './CaseHeader';
 //# sourceMappingURL=index.js.map