@pega/cosmos-react-work 5.0.0-dev.4.9 → 5.0.0-dev.6.0

package/lib/components/ArticleList/ArticleListHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArticleListHeader.js","sourceRoot":"","sources":["../../../src/components/ArticleList/ArticleListHeader.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAItF,MAAM,gBAAgB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;;;;CAKpC,CAAC;AAEF,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,CAC7B,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,EAClB,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;4BACc,OAAO;KAC9B,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,UAAU,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3C,MAAM,iBAAiB,GAA8C,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,EAAE;IAChG,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,aAC7D,IAAI,IAAI,KAAC,UAAU,IAAC,IAAI,EAAE,IAAI,GAAI,EACnC,KAAC,gBAAgB,IAAC,OAAO,EAAC,IAAI,YAAE,KAAK,GAAoB,EACxD,OAAO,IAAI,KAAC,OAAO,IAAC,KAAK,EAAE,OAAO,GAAI,IAClC,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,iBAAiB,CAAC","sourcesContent":["import type { FunctionComponent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Flex, Icon, Actions, Text, defaultThemeProp } from '@pega/cosmos-react-core';\n\nimport type { ArticleListHeaderProps } from './ArticleList.types';\n\nconst StyledHeaderText = styled(Text)`\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n  flex-grow: 1;\n`;\n\nconst StyledIcon = styled(Icon)(\n  ({\n    theme: {\n      base: { spacing }\n    }\n  }) => {\n    return css`\n      min-width: calc(3 * ${spacing});\n    `;\n  }\n);\n\nStyledIcon.defaultProps = defaultThemeProp;\n\nconst ArticleListHeader: FunctionComponent<ArticleListHeaderProps> = ({ icon, title, actions }) => {\n  return (\n    <Flex container={{ alignItems: 'center', gap: 1, pad: [1.5, 2] }}>\n      {icon && <StyledIcon name={icon} />}\n      <StyledHeaderText variant='h2'>{title}</StyledHeaderText>\n      {actions && <Actions items={actions} />}\n    </Flex>\n  );\n};\n\nexport default ArticleListHeader;\n"]}

package/lib/components/ArticleList/ArticleSummary.d.ts

@@ -0,0 +1,7 @@
+import type { FunctionComponent } from 'react';
+import type { ForwardProps } from '@pega/cosmos-react-core';
+import type { ArticleSummaryProps } from './ArticleList.types';
+export declare const StyledQuickFilters: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+declare const ArticleSummary: FunctionComponent<ArticleSummaryProps & ForwardProps>;
+export default ArticleSummary;
+//# sourceMappingURL=ArticleSummary.d.ts.map

package/lib/components/ArticleList/ArticleSummary.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArticleSummary.d.ts","sourceRoot":"","sources":["../../../src/components/ArticleList/ArticleSummary.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAe/C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAU5D,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAqC/D,eAAO,MAAM,kBAAkB,yGAW7B,CAAC;AAGH,QAAA,MAAM,cAAc,EAAE,iBAAiB,CAAC,mBAAmB,GAAG,YAAY,CAsEzE,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/lib/components/ArticleList/ArticleSummary.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled, { css } from 'styled-components';
+import { CardHeader, CardContent, CardFooter, Link, Text, StyledText, Actions, Flex, Tag, defaultThemeProp } from '@pega/cosmos-react-core';
+import { StyledCard } from '@pega/cosmos-react-core/lib/components/Card/Card';
+import { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';
+import { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';
+import { StyledCardFooter } from '@pega/cosmos-react-core/lib/components/Card/CardFooter';
+import { StyledBareButton } from '@pega/cosmos-react-core/lib/components/Button/BareButton';
+import ArticleRating from '../Article/ArticleRating';
+import ArticleMeta from '../Article/ArticleMeta';
+const ArticleCard = styled(StyledCard)(({ theme: { base: { spacing, palette } } }) => {
+    return css `
+      &:not(:last-child) {
+        border-block-end: 0.0625rem solid ${palette['border-line']};
+        border-radius: 0;
+        padding-block-end: ${spacing};
+      }
+      &&& {
+        border-radius: 0;
+        > ${StyledCardHeader} {
+          padding-block-start: 0;
+          padding-inline: 0;
+        }
+        > ${StyledCardContent}, > ${StyledCardFooter} {
+          padding-inline: 0;
+        }
+        > ${StyledCardContent} {
+          padding-block-end: ${spacing};
+        }
+        > ${StyledCardContent} > ${StyledText} {
+          display: -webkit-box;
+          -webkit-line-clamp: 3;
+          -webkit-box-orient: vertical;
+          overflow: hidden;
+        }
+      }
+    `;
+});
+export const StyledQuickFilters = styled.div(({ theme }) => {
+    const { base: { spacing } } = theme;
+    return css `
+    ${StyledBareButton} {
+      margin-inline-start: 0;
+      margin-block-start: ${spacing};
+    }
+  `;
+});
+StyledQuickFilters.defaultProps = defaultThemeProp;
+const ArticleSummary = (props) => {
+    const { articleId, href, title, abstract, onTitleClick, primaryActions, meta, quickFilters, onQuickFilterClick, feedback, ...restProps } = props;
+    return (_jsxs(ArticleCard, { as: 'li', role: 'article', ...restProps, children: [_jsxs(CardHeader, { container: { alignItems: 'start', justify: 'between' }, children: [_jsx(Link, { href: href ?? '/', onClick: onTitleClick, children: title }), primaryActions?.length && _jsx(Actions, { items: primaryActions })] }), _jsx(CardContent, { children: _jsx(Text, { children: abstract }) }), _jsxs(CardFooter, { children: [feedback && (_jsx(Flex, { container: { pad: [0.5, undefined] }, item: {
+                            grow: 1,
+                            basis: '100%'
+                        }, children: _jsx(ArticleRating, { ...feedback,
+                            onReaction: reaction => {
+                                feedback?.onReaction(articleId, reaction);
+                            } }) })), meta && _jsx(ArticleMeta, { ...meta }), quickFilters && quickFilters.length > 0 && (_jsx(Flex, { container: { gap: 0.5, wrap: 'wrap', pad: [undefined, undefined, 0.5] }, item: {
+                            grow: 1,
+                            basis: '100%'
+                        }, as: StyledQuickFilters, children: quickFilters.map(({ id, name }) => (_jsx(Tag, { onClick: onQuickFilterClick ? e => onQuickFilterClick?.({ id, name }, e) : undefined, children: `#${name}` }, id))) }))] })] }));
+};
+export default ArticleSummary;
+//# sourceMappingURL=ArticleSummary.js.map

package/lib/components/ArticleList/ArticleSummary.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArticleSummary.js","sourceRoot":"","sources":["../../../src/components/ArticleList/ArticleSummary.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { FunctionComponent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  CardHeader,\n  CardContent,\n  CardFooter,\n  Link,\n  Text,\n  StyledText,\n  Actions,\n  Flex,\n  Tag,\n  defaultThemeProp\n} from '@pega/cosmos-react-core';\nimport type { ForwardProps } from '@pega/cosmos-react-core';\nimport { StyledCard } from '@pega/cosmos-react-core/lib/components/Card/Card';\nimport { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';\nimport { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';\nimport { StyledCardFooter } from '@pega/cosmos-react-core/lib/components/Card/CardFooter';\nimport { StyledBareButton } from '@pega/cosmos-react-core/lib/components/Button/BareButton';\n\nimport ArticleRating from '../Article/ArticleRating';\nimport ArticleMeta from '../Article/ArticleMeta';\n\nimport type { ArticleSummaryProps } from './ArticleList.types';\n\nconst ArticleCard = styled(StyledCard)(\n  ({\n    theme: {\n      base: { spacing, palette }\n    }\n  }) => {\n    return css`\n      &:not(:last-child) {\n        border-block-end: 0.0625rem solid ${palette['border-line']};\n        border-radius: 0;\n        padding-block-end: ${spacing};\n      }\n      &&& {\n        border-radius: 0;\n        > ${StyledCardHeader} {\n          padding-block-start: 0;\n          padding-inline: 0;\n        }\n        > ${StyledCardContent}, > ${StyledCardFooter} {\n          padding-inline: 0;\n        }\n        > ${StyledCardContent} {\n          padding-block-end: ${spacing};\n        }\n        > ${StyledCardContent} > ${StyledText} {\n          display: -webkit-box;\n          -webkit-line-clamp: 3;\n          -webkit-box-orient: vertical;\n          overflow: hidden;\n        }\n      }\n    `;\n  }\n);\n\nexport const StyledQuickFilters = styled.div(({ theme }) => {\n  const {\n    base: { spacing }\n  } = theme;\n\n  return css`\n    ${StyledBareButton} {\n      margin-inline-start: 0;\n      margin-block-start: ${spacing};\n    }\n  `;\n});\nStyledQuickFilters.defaultProps = defaultThemeProp;\n\nconst ArticleSummary: FunctionComponent<ArticleSummaryProps & ForwardProps> = (\n  props: ArticleSummaryProps\n) => {\n  const {\n    articleId,\n    href,\n    title,\n    abstract,\n    onTitleClick,\n    primaryActions,\n    meta,\n    quickFilters,\n    onQuickFilterClick,\n    feedback,\n    ...restProps\n  } = props;\n  return (\n    <ArticleCard as='li' role='article' {...restProps}>\n      <CardHeader container={{ alignItems: 'start', justify: 'between' }}>\n        <Link href={href ?? '/'} onClick={onTitleClick}>\n          {title}\n        </Link>\n        {primaryActions?.length && <Actions items={primaryActions} />}\n      </CardHeader>\n\n      <CardContent>\n        <Text>{abstract}</Text>\n      </CardContent>\n      <CardFooter>\n        {feedback && (\n          <Flex\n            container={{ pad: [0.5, undefined] }}\n            item={{\n              grow: 1,\n              basis: '100%'\n            }}\n          >\n            <ArticleRating\n              {...{\n                ...feedback,\n                onReaction: reaction => {\n                  feedback?.onReaction(articleId, reaction);\n                }\n              }}\n            />\n          </Flex>\n        )}\n        {meta && <ArticleMeta {...meta} />}\n        {quickFilters && quickFilters.length > 0 && (\n          <Flex\n            container={{ gap: 0.5, wrap: 'wrap', pad: [undefined, undefined, 0.5] }}\n            item={{\n              grow: 1,\n              basis: '100%'\n            }}\n            as={StyledQuickFilters}\n          >\n            {quickFilters.map(({ id, name }) => (\n              <Tag\n                key={id}\n                onClick={\n                  onQuickFilterClick ? e => onQuickFilterClick?.({ id, name }, e) : undefined\n                }\n              >{`#${name}`}</Tag>\n            ))}\n          </Flex>\n        )}\n      </CardFooter>\n    </ArticleCard>\n  );\n};\n\nexport default ArticleSummary;\n"]}

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

@@ -0,0 +1,8 @@
+export { default } from './ArticleList';
+export type { ArticleListProps } from './ArticleList.types';
+export { default as ArticleSummary } from './ArticleSummary';
+export type { ArticleSummaryProps, Articles, QuickFilter } from './ArticleList.types';
+export { default as ArticleListFilter } from './ArticleListFilter';
+export type { ArticleBuddyProps } from './ArticleList.types';
+export { default as ArticleBuddy } from './ArticleBuddy';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ArticleList/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,YAAY,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,YAAY,EAAE,mBAAmB,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AACtF,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACnE,YAAY,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC"}

package/lib/components/ArticleList/index.js

@@ -0,0 +1,5 @@
+export { default } from './ArticleList';
+export { default as ArticleSummary } from './ArticleSummary';
+export { default as ArticleListFilter } from './ArticleListFilter';
+export { default as ArticleBuddy } from './ArticleBuddy';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ArticleList/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAExC,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAE7D,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAEnE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC","sourcesContent":["export { default } from './ArticleList';\nexport type { ArticleListProps } from './ArticleList.types';\nexport { default as ArticleSummary } from './ArticleSummary';\nexport type { ArticleSummaryProps, Articles, QuickFilter } from './ArticleList.types';\nexport { default as ArticleListFilter } from './ArticleListFilter';\nexport type { ArticleBuddyProps } from './ArticleList.types';\nexport { default as ArticleBuddy } from './ArticleBuddy';\n"]}

package/lib/components/Assignments/Assignments.d.ts

@@ -0,0 +1,21 @@
+import type { FC } from 'react';
+import type { ForwardProps, NoChildrenProp } from '@pega/cosmos-react-core';
+import type { TaskItemProps } from '../Tasks/TaskList';
+export interface AssignmentsProps extends NoChildrenProp {
+    /** An array of TaskItemProps to generate the list. */
+    items: TaskItemProps[];
+    /** Integer representing the total count of tasks. */
+    count: number;
+    /**
+     * Controls the collapsed state of the assignments list.
+     * @default false
+     */
+    collapsed?: boolean;
+    /**
+     * Call when the user clicks the collapsed element.
+     */
+    onToggleCollapsed?: () => void;
+}
+declare const Assignments: FC<ForwardProps & AssignmentsProps>;
+export default Assignments;
+//# sourceMappingURL=Assignments.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Assignments.d.ts","sourceRoot":"","sources":["../../../src/components/Assignments/Assignments.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAahC,OAAO,KAAK,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAG5E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAIvD,MAAM,WAAW,gBAAiB,SAAQ,cAAc;IACtD,sDAAsD;IACtD,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,qDAAqD;IACrD,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;CAChC;AAED,QAAA,MAAM,WAAW,EAAE,EAAE,CAAC,YAAY,GAAG,gBAAgB,CA0DpD,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/components/Assignments/Assignments.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { CardHeader, useI18n, EmptyState, ExpandCollapse, Icon, Text, Count, Flex, useUID } from '@pega/cosmos-react-core';
+import TaskList, { TaskItem } from '../Tasks/TaskList';
+import { StyledAssignments, StyledCardContent, StyledExpandButton } from './Assignments.styles';
+const Assignments = ({ items, count, collapsed, onToggleCollapsed, ...restProps }) => {
+    const openItem = items.find(item => item.content);
+    const t = useI18n();
+    const assignmentsId = useUID();
+    const TaskItems = useMemo(() => {
+        return openItem ? _jsx(TaskItem, { ...openItem }) : _jsx(TaskList, { items: items });
+    }, [items, openItem]);
+    const tasks = (_jsx(StyledCardContent, { openItem: openItem, children: items.length > 0 ? TaskItems : _jsx(EmptyState, {}) }));
+    const header = (_jsxs(Flex, { container: { alignItems: 'center', gap: 1 }, children: [typeof collapsed === 'boolean' && _jsx(Icon, { name: 'caret-right' }), _jsx(Text, { variant: 'h2', children: t('assignments') }), _jsx(Count, { children: count })] }));
+    return (_jsxs(StyledAssignments, { ...restProps, openItem: !!openItem, "data-app-region": true, children: [!openItem && (_jsxs(CardHeader, { container: { justify: 'start', alignItems: 'center', gap: 1 }, children: [typeof collapsed === 'boolean' && onToggleCollapsed && (_jsx(StyledExpandButton, { type: 'button', variant: 'text', onClick: () => {
+                            onToggleCollapsed();
+                        }, "aria-controls": assignmentsId, "aria-expanded": !collapsed ? 'true' : 'false', "aria-label": t('assignments'), children: header })), collapsed === undefined && header] })), typeof collapsed === 'boolean' && onToggleCollapsed && !openItem ? (_jsx(ExpandCollapse, { collapsed: collapsed, children: tasks })) : (tasks)] }));
+};
+export default Assignments;
+//# sourceMappingURL=Assignments.js.map

package/lib/components/Assignments/Assignments.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Assignments.js","sourceRoot":"","sources":["../../../src/components/Assignments/Assignments.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAGhC,OAAO,EACL,UAAU,EACV,OAAO,EACP,UAAU,EACV,cAAc,EACd,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,IAAI,EACJ,MAAM,EACP,MAAM,yBAAyB,CAAC;AAGjC,OAAO,QAAQ,EAAE,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAGvD,OAAO,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAkBhG,MAAM,WAAW,GAAwC,CAAC,EACxD,KAAK,EACL,KAAK,EACL,SAAS,EACT,iBAAiB,EACjB,GAAG,SAAS,EACb,EAAE,EAAE;IACH,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAClD,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,aAAa,GAAG,MAAM,EAAE,CAAC;IAE/B,MAAM,SAAS,GAAG,OAAO,CAAC,GAAG,EAAE;QAC7B,OAAO,QAAQ,CAAC,CAAC,CAAC,KAAC,QAAQ,OAAK,QAAQ,GAAI,CAAC,CAAC,CAAC,KAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,GAAI,CAAC;IAC5E,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEtB,MAAM,KAAK,GAAG,CACZ,KAAC,iBAAiB,IAAC,QAAQ,EAAE,QAAQ,YAClC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAC,UAAU,KAAG,GAC5B,CACrB,CAAC;IAEF,MAAM,MAAM,GAAG,CACb,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aAC9C,OAAO,SAAS,KAAK,SAAS,IAAI,KAAC,IAAI,IAAC,IAAI,EAAC,aAAa,GAAG,EAC9D,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,CAAC,CAAC,aAAa,CAAC,GAAQ,EAC5C,KAAC,KAAK,cAAE,KAAK,GAAS,IACjB,CACR,CAAC;IAEF,OAAO,CACL,MAAC,iBAAiB,OAAK,SAAS,EAAE,QAAQ,EAAE,CAAC,CAAC,QAAQ,sCACnD,CAAC,QAAQ,IAAI,CACZ,MAAC,UAAU,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aACtE,OAAO,SAAS,KAAK,SAAS,IAAI,iBAAiB,IAAI,CACtD,KAAC,kBAAkB,IACjB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAC,MAAM,EACd,OAAO,EAAE,GAAG,EAAE;4BACZ,iBAAiB,EAAE,CAAC;wBACtB,CAAC,mBACc,aAAa,mBACb,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,gBAChC,CAAC,CAAC,aAAa,CAAC,YAE3B,MAAM,GACY,CACtB,EACA,SAAS,KAAK,SAAS,IAAI,MAAM,IACvB,CACd,EAEA,OAAO,SAAS,KAAK,SAAS,IAAI,iBAAiB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAClE,KAAC,cAAc,IAAC,SAAS,EAAE,SAAS,YAAG,KAAK,GAAkB,CAC/D,CAAC,CAAC,CAAC,CACF,KAAK,CACN,IACiB,CACrB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { useMemo } from 'react';\nimport type { FC } from 'react';\n\nimport {\n  CardHeader,\n  useI18n,\n  EmptyState,\n  ExpandCollapse,\n  Icon,\n  Text,\n  Count,\n  Flex,\n  useUID\n} from '@pega/cosmos-react-core';\nimport type { ForwardProps, NoChildrenProp } from '@pega/cosmos-react-core';\n\nimport TaskList, { TaskItem } from '../Tasks/TaskList';\nimport type { TaskItemProps } from '../Tasks/TaskList';\n\nimport { StyledAssignments, StyledCardContent, StyledExpandButton } from './Assignments.styles';\n\nexport interface AssignmentsProps extends NoChildrenProp {\n  /** An array of TaskItemProps to generate the list. */\n  items: TaskItemProps[];\n  /** Integer representing the total count of tasks. */\n  count: number;\n  /**\n   * Controls the collapsed state of the assignments list.\n   * @default false\n   */\n  collapsed?: boolean;\n  /**\n   * Call when the user clicks the collapsed element.\n   */\n  onToggleCollapsed?: () => void;\n}\n\nconst Assignments: FC<ForwardProps & AssignmentsProps> = ({\n  items,\n  count,\n  collapsed,\n  onToggleCollapsed,\n  ...restProps\n}) => {\n  const openItem = items.find(item => item.content);\n  const t = useI18n();\n  const assignmentsId = useUID();\n\n  const TaskItems = useMemo(() => {\n    return openItem ? <TaskItem {...openItem} /> : <TaskList items={items} />;\n  }, [items, openItem]);\n\n  const tasks = (\n    <StyledCardContent openItem={openItem}>\n      {items.length > 0 ? TaskItems : <EmptyState />}\n    </StyledCardContent>\n  );\n\n  const header = (\n    <Flex container={{ alignItems: 'center', gap: 1 }}>\n      {typeof collapsed === 'boolean' && <Icon name='caret-right' />}\n      <Text variant='h2'>{t('assignments')}</Text>\n      <Count>{count}</Count>\n    </Flex>\n  );\n\n  return (\n    <StyledAssignments {...restProps} openItem={!!openItem} data-app-region>\n      {!openItem && (\n        <CardHeader container={{ justify: 'start', alignItems: 'center', gap: 1 }}>\n          {typeof collapsed === 'boolean' && onToggleCollapsed && (\n            <StyledExpandButton\n              type='button'\n              variant='text'\n              onClick={() => {\n                onToggleCollapsed();\n              }}\n              aria-controls={assignmentsId}\n              aria-expanded={!collapsed ? 'true' : 'false'}\n              aria-label={t('assignments')}\n            >\n              {header}\n            </StyledExpandButton>\n          )}\n          {collapsed === undefined && header}\n        </CardHeader>\n      )}\n\n      {typeof collapsed === 'boolean' && onToggleCollapsed && !openItem ? (\n        <ExpandCollapse collapsed={collapsed}>{tasks}</ExpandCollapse>\n      ) : (\n        tasks\n      )}\n    </StyledAssignments>\n  );\n};\n\nexport default Assignments;\n"]}

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

@@ -0,0 +1,8 @@
+export declare const StyledExpandButton: 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 StyledAssignments: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").CardProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {
+    openItem?: boolean | undefined;
+}, never>;
+export declare const StyledCardContent: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").CardContentProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {
+    openItem?: boolean | undefined;
+}, never>;
+//# sourceMappingURL=Assignments.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Assignments.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Assignments/Assignments.styles.ts"],"names":[],"mappings":"AAYA,eAAO,MAAM,kBAAkB,qOA0B9B,CAAC;AAIF,eAAO,MAAM,iBAAiB;;SAM5B,CAAC;AAIH,eAAO,MAAM,iBAAiB;;SAQ7B,CAAC"}

package/lib/components/Assignments/Assignments.styles.js

@@ -0,0 +1,41 @@
+import styled, { css } from 'styled-components';
+import { Button, Card, CardContent, defaultThemeProp, StyledCard, StyledIcon, useDirection } from '@pega/cosmos-react-core';
+export const StyledExpandButton = styled(Button)(({ theme: { base: { animation } } }) => {
+    const { rtl } = useDirection();
+    return css `
+      ${StyledIcon} {
+        transition: transform ${animation.speed} ${animation.timing.ease};
+      }
+
+      &[aria-expanded='true'] ${StyledIcon} {
+        transform: rotate(90deg);
+      }
+
+      &[aria-expanded='false'] ${StyledIcon} {
+        transform: rotate(${rtl ? 180 : 0}deg);
+      }
+
+      &:hover,
+      &:active {
+        text-decoration: none;
+      }
+    `;
+});
+StyledExpandButton.defaultProps = defaultThemeProp;
+export const StyledAssignments = styled(Card)(({ theme, openItem }) => {
+    return openItem
+        ? css `
+        box-shadow: ${theme.base.shadow.low};
+      `
+        : null;
+});
+StyledAssignments.defaultProps = defaultThemeProp;
+export const StyledCardContent = styled(CardContent)(({ theme, openItem }) => {
+    return css `
+      &:not(${StyledCard} ${StyledCard} > &) {
+        padding: ${openItem ? theme.base.spacing : '0'} calc(2 * ${theme.base.spacing});
+      }
+    `;
+});
+StyledCardContent.defaultProps = defaultThemeProp;
+//# sourceMappingURL=Assignments.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Assignments.styles.js","sourceRoot":"","sources":["../../../src/components/Assignments/Assignments.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,MAAM,EACN,IAAI,EACJ,WAAW,EACX,gBAAgB,EAChB,UAAU,EACV,UAAU,EACV,YAAY,EACb,MAAM,yBAAyB,CAAC;AAEjC,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,MAAM,CAAC,CAC9C,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,SAAS,EAAE,EACpB,EACF,EAAE,EAAE;IACH,MAAM,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC;IAC/B,OAAO,GAAG,CAAA;QACN,UAAU;gCACc,SAAS,CAAC,KAAK,IAAI,SAAS,CAAC,MAAM,CAAC,IAAI;;;gCAGxC,UAAU;;;;iCAIT,UAAU;4BACf,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;;;;;;;KAOpC,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAyB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC5F,OAAO,QAAQ;QACb,CAAC,CAAC,GAAG,CAAA;sBACa,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG;OACpC;QACH,CAAC,CAAC,IAAI,CAAC;AACX,CAAC,CAAC,CAAC;AAEH,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,WAAW,CAAC,CAClD,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE;IACtB,OAAO,GAAG,CAAA;cACA,UAAU,IAAI,UAAU;mBACnB,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,aAAa,KAAK,CAAC,IAAI,CAAC,OAAO;;KAEhF,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport {\n  Button,\n  Card,\n  CardContent,\n  defaultThemeProp,\n  StyledCard,\n  StyledIcon,\n  useDirection\n} from '@pega/cosmos-react-core';\n\nexport const StyledExpandButton = styled(Button)(\n  ({\n    theme: {\n      base: { animation }\n    }\n  }) => {\n    const { rtl } = useDirection();\n    return css`\n      ${StyledIcon} {\n        transition: transform ${animation.speed} ${animation.timing.ease};\n      }\n\n      &[aria-expanded='true'] ${StyledIcon} {\n        transform: rotate(90deg);\n      }\n\n      &[aria-expanded='false'] ${StyledIcon} {\n        transform: rotate(${rtl ? 180 : 0}deg);\n      }\n\n      &:hover,\n      &:active {\n        text-decoration: none;\n      }\n    `;\n  }\n);\n\nStyledExpandButton.defaultProps = defaultThemeProp;\n\nexport const StyledAssignments = styled(Card)<{ openItem?: boolean }>(({ theme, openItem }) => {\n  return openItem\n    ? css`\n        box-shadow: ${theme.base.shadow.low};\n      `\n    : null;\n});\n\nStyledAssignments.defaultProps = defaultThemeProp;\n\nexport const StyledCardContent = styled(CardContent)<{ openItem?: boolean }>(\n  ({ theme, openItem }) => {\n    return css`\n      &:not(${StyledCard} ${StyledCard} > &) {\n        padding: ${openItem ? theme.base.spacing : '0'} calc(2 * ${theme.base.spacing});\n      }\n    `;\n  }\n);\n\nStyledCardContent.defaultProps = defaultThemeProp;\n"]}

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

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

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

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

package/lib/components/Assignments/index.js

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

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

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

package/lib/components/CasePreview/CasePreview.d.ts

@@ -0,0 +1,27 @@
+import type { FunctionComponent, Ref } from 'react';
+import type { ForwardProps, BaseProps, TestIdProp, NoChildrenProp } from '@pega/cosmos-react-core';
+import type { CaseViewProps } from '../CaseView';
+import type { CaseViewContextValue } from '../CaseView/CaseView.types';
+export interface CasePreviewProps extends Pick<CaseViewProps, 'caseId' | 'heading' | 'subheading' | 'parentCases' | 'icon' | 'followed' | 'onFollowedChange' | 'actions' | 'promotedActions' | 'onEdit' | 'summaryFields' | 'tabs' | 'tabContent' | 'stages' | 'tasks' | 'banners' | 'utilities' | 'utilitiesSummaryItems'>, NoChildrenProp, TestIdProp, BaseProps {
+    /** A set of props including an href that will be forwarded to the case preview's heading and subheading. */
+    caseLink?: CaseViewContextValue['caseLink'];
+    /** If true, the Case Preview will be visible. */
+    open: boolean;
+    /** Callback fired before Case Preview opens. */
+    onBeforeOpen?: () => void;
+    /** Callback fired after Case Preview opens. */
+    onAfterOpen?: () => void;
+    /** Callback fired before Case Preview closes. */
+    onBeforeClose?: () => void;
+    /** Callback fired after Case Preview closes. */
+    onAfterClose?: () => void;
+    /** Callback fired when a click action occurs outside of the Case Preview. */
+    onOuterClick?: () => void;
+    /** Reference to the wrapping element. */
+    ref?: Ref<HTMLDivElement>;
+}
+declare const _default: FunctionComponent<CasePreviewProps & ForwardProps> & {
+    getTestIds: (testIdProp?: string | undefined) => import("@pega/cosmos-react-core").TestIdsRecord<readonly ["close"]>;
+};
+export default _default;
+//# sourceMappingURL=CasePreview.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CasePreview.d.ts","sourceRoot":"","sources":["../../../src/components/CasePreview/CasePreview.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAoBrE,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AASnG,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAMvE,MAAM,WAAW,gBACf,SAAQ,IAAI,CACR,aAAa,EACX,QAAQ,GACR,SAAS,GACT,YAAY,GACZ,aAAa,GACb,MAAM,GACN,UAAU,GACV,kBAAkB,GAClB,SAAS,GACT,iBAAiB,GACjB,QAAQ,GACR,eAAe,GACf,MAAM,GACN,YAAY,GACZ,QAAQ,GACR,OAAO,GACP,SAAS,GACT,WAAW,GACX,uBAAuB,CAC1B,EACD,cAAc,EACd,UAAU,EACV,SAAS;IACX,4GAA4G;IAC5G,QAAQ,CAAC,EAAE,oBAAoB,CAAC,UAAU,CAAC,CAAC;IAC5C,iDAAiD;IACjD,IAAI,EAAE,OAAO,CAAC;IACd,gDAAgD;IAChD,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,+CAA+C;IAC/C,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,iDAAiD;IACjD,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,gDAAgD;IAChD,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,6EAA6E;IAC7E,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,yCAAyC;IACzC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;;;;AA0KD,wBAA+D"}

package/lib/components/CasePreview/CasePreview.js

@@ -0,0 +1,82 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useState, useCallback, useEffect, useContext } from 'react';
+import styled, { css } from 'styled-components';
+import { readableColor } from 'polished';
+import { Drawer, Icon, registerIcon, Button, Flex, tryCatch, defaultThemeProp, useBreakpoint, useElement, useDirection, useI18n, AppShellContext, useTestIds, withTestIds } from '@pega/cosmos-react-core';
+import * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';
+import CaseView, { StyledCaseView, StyledCaseViewContent, StyledCaseDrawer, StyledSummaryRegion } from '../CaseView';
+import { getCasePreviewTestIds } from './CasePreview.test-ids';
+registerIcon(timesIcon);
+const StyledPreviewHeader = styled.div(({ theme }) => {
+    return css `
+    z-index: ${theme.base['z-index'].drawer};
+    background-color: ${theme.base.palette['primary-background']};
+  `;
+});
+StyledPreviewHeader.defaultProps = defaultThemeProp;
+const StyledPreviewActions = styled.div(({ theme: { base: { spacing, palette: { 'brand-primary': brandPrimary } } } }) => {
+    const buttonColor = tryCatch(() => readableColor(brandPrimary));
+    return css `
+      background-color: ${brandPrimary};
+      padding: ${spacing} calc(2 * ${spacing}) 0;
+
+      button {
+        color: ${buttonColor};
+      }
+    `;
+});
+StyledPreviewActions.defaultProps = defaultThemeProp;
+const StyledPreviewDrawer = styled(StyledCaseDrawer)(({ theme }) => {
+    return css `
+    height: calc(100vh - var(--appshell-offset, 0rem));
+    top: var(--appshell-offset, 0);
+    z-index: calc(${theme.base['z-index'].drawer} + 500);
+
+    ${StyledCaseView} {
+      height: calc(100vh - ${theme.base.spacing} - ${theme.base['hit-area']['mouse-min']});
+
+      @media (pointer: coarse) {
+        height: calc(100vh - ${theme.base.spacing} - ${theme.base['hit-area']['finger-min']});
+      }
+
+      ${StyledSummaryRegion} {
+        position: relative;
+        top: 0;
+      }
+    }
+
+    ${StyledCaseViewContent} {
+      overflow-y: auto;
+
+      & > :last-child {
+        padding-bottom: calc(2 * ${theme.base.spacing});
+      }
+    }
+  `;
+});
+StyledPreviewDrawer.defaultProps = defaultThemeProp;
+const CasePreview = forwardRef(function CasePreview(props, ref) {
+    const { testId, open: openProp, caseId, heading, subheading, caseLink, parentCases, icon, followed, onFollowedChange, summaryFields, tabs, stages, tasks, tabContent, utilities, utilitiesSummaryItems, actions, banners, onEdit, ...restProps } = props;
+    const testIds = useTestIds(testId, getCasePreviewTestIds);
+    const t = useI18n();
+    const { previewTriggerRef } = useContext(AppShellContext);
+    const [closeButtonEl, setCloseButtonEl] = useElement();
+    const isSmallOrAbove = useBreakpoint('sm');
+    const [open, setOpen] = useState(openProp);
+    const direction = useDirection();
+    const closePreview = useCallback(() => {
+        setOpen(false);
+        previewTriggerRef.current?.focus();
+    }, []);
+    useEffect(() => {
+        setOpen(openProp);
+    }, [openProp]);
+    useEffect(() => {
+        if (openProp && closeButtonEl) {
+            closeButtonEl.focus();
+        }
+    }, [openProp, closeButtonEl]);
+    return (_jsxs(Drawer, { "data-testid": testIds.root, ...restProps, as: StyledPreviewDrawer, role: 'complementary', forwardedAs: Flex, container: { direction: 'column' }, ref: ref, open: open && isSmallOrAbove, position: 'fixed', placement: direction.end, "aria-label": t('preview_of_noun', [heading]), shadow: true, nullWhenClosed: true, children: [_jsx(StyledPreviewActions, { children: _jsx(Button, { "data-testid": testIds.close, variant: 'simple', icon: true, onClick: closePreview, ref: setCloseButtonEl, label: t('close_preview'), children: _jsx(Icon, { name: 'times' }) }) }), _jsx(CaseView, { caseId: caseId, parentCases: parentCases, heading: heading, subheading: subheading, caseLink: caseLink, icon: icon, followed: followed, onFollowedChange: onFollowedChange, summaryFields: summaryFields, tabs: tabs, stages: stages, tasks: tasks, tabContent: tabContent, utilities: utilities, utilitiesSummaryItems: utilitiesSummaryItems, actions: actions, banners: banners, onEdit: onEdit, isPreview: true })] }));
+});
+export default withTestIds(CasePreview, getCasePreviewTestIds);
+//# sourceMappingURL=CasePreview.js.map

package/lib/components/CasePreview/CasePreview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CasePreview.js","sourceRoot":"","sources":["../../../src/components/CasePreview/CasePreview.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useState, useCallback, useEffect, useContext } from 'react';\nimport type { FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\nimport { readableColor } from 'polished';\n\nimport {\n  Drawer,\n  Icon,\n  registerIcon,\n  Button,\n  Flex,\n  tryCatch,\n  defaultThemeProp,\n  useBreakpoint,\n  useElement,\n  useDirection,\n  useI18n,\n  AppShellContext,\n  useTestIds,\n  withTestIds\n} from '@pega/cosmos-react-core';\nimport type { ForwardProps, BaseProps, TestIdProp, NoChildrenProp } from '@pega/cosmos-react-core';\nimport * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';\n\nimport CaseView, {\n  StyledCaseView,\n  StyledCaseViewContent,\n  StyledCaseDrawer,\n  StyledSummaryRegion\n} from '../CaseView';\nimport type { CaseViewProps } from '../CaseView';\nimport type { CaseViewContextValue } from '../CaseView/CaseView.types';\n\nimport { getCasePreviewTestIds } from './CasePreview.test-ids';\n\nregisterIcon(timesIcon);\n\nexport interface CasePreviewProps\n  extends Pick<\n      CaseViewProps,\n      | 'caseId'\n      | 'heading'\n      | 'subheading'\n      | 'parentCases'\n      | 'icon'\n      | 'followed'\n      | 'onFollowedChange'\n      | 'actions'\n      | 'promotedActions'\n      | 'onEdit'\n      | 'summaryFields'\n      | 'tabs'\n      | 'tabContent'\n      | 'stages'\n      | 'tasks'\n      | 'banners'\n      | 'utilities'\n      | 'utilitiesSummaryItems'\n    >,\n    NoChildrenProp,\n    TestIdProp,\n    BaseProps {\n  /** A set of props including an href that will be forwarded to the case preview's heading and subheading. */\n  caseLink?: CaseViewContextValue['caseLink'];\n  /** If true, the Case Preview will be visible. */\n  open: boolean;\n  /** Callback fired before Case Preview opens. */\n  onBeforeOpen?: () => void;\n  /** Callback fired after Case Preview opens. */\n  onAfterOpen?: () => void;\n  /** Callback fired before Case Preview closes. */\n  onBeforeClose?: () => void;\n  /** Callback fired after Case Preview closes. */\n  onAfterClose?: () => void;\n  /** Callback fired when a click action occurs outside of the Case Preview. */\n  onOuterClick?: () => void;\n  /** Reference to the wrapping element. */\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst StyledPreviewHeader = styled.div(({ theme }) => {\n  return css`\n    z-index: ${theme.base['z-index'].drawer};\n    background-color: ${theme.base.palette['primary-background']};\n  `;\n});\n\nStyledPreviewHeader.defaultProps = defaultThemeProp;\n\nconst StyledPreviewActions = styled.div(\n  ({\n    theme: {\n      base: {\n        spacing,\n        palette: { 'brand-primary': brandPrimary }\n      }\n    }\n  }) => {\n    const buttonColor = tryCatch(() => readableColor(brandPrimary));\n\n    return css`\n      background-color: ${brandPrimary};\n      padding: ${spacing} calc(2 * ${spacing}) 0;\n\n      button {\n        color: ${buttonColor};\n      }\n    `;\n  }\n);\n\nStyledPreviewActions.defaultProps = defaultThemeProp;\n\nconst StyledPreviewDrawer = styled(StyledCaseDrawer)(({ theme }) => {\n  return css`\n    height: calc(100vh - var(--appshell-offset, 0rem));\n    top: var(--appshell-offset, 0);\n    z-index: calc(${theme.base['z-index'].drawer} + 500);\n\n    ${StyledCaseView} {\n      height: calc(100vh - ${theme.base.spacing} - ${theme.base['hit-area']['mouse-min']});\n\n      @media (pointer: coarse) {\n        height: calc(100vh - ${theme.base.spacing} - ${theme.base['hit-area']['finger-min']});\n      }\n\n      ${StyledSummaryRegion} {\n        position: relative;\n        top: 0;\n      }\n    }\n\n    ${StyledCaseViewContent} {\n      overflow-y: auto;\n\n      & > :last-child {\n        padding-bottom: calc(2 * ${theme.base.spacing});\n      }\n    }\n  `;\n});\n\nStyledPreviewDrawer.defaultProps = defaultThemeProp;\n\nconst CasePreview: FunctionComponent<CasePreviewProps & ForwardProps> = forwardRef(\n  function CasePreview(props: PropsWithoutRef<CasePreviewProps>, ref: CasePreviewProps['ref']) {\n    const {\n      testId,\n      open: openProp,\n      caseId,\n      heading,\n      subheading,\n      caseLink,\n      parentCases,\n      icon,\n      followed,\n      onFollowedChange,\n      summaryFields,\n      tabs,\n      stages,\n      tasks,\n      tabContent,\n      utilities,\n      utilitiesSummaryItems,\n      actions,\n      banners,\n      onEdit,\n      ...restProps\n    } = props;\n    const testIds = useTestIds(testId, getCasePreviewTestIds);\n\n    const t = useI18n();\n    const { previewTriggerRef } = useContext(AppShellContext);\n    const [closeButtonEl, setCloseButtonEl] = useElement<HTMLButtonElement>();\n    const isSmallOrAbove = useBreakpoint('sm');\n    const [open, setOpen] = useState(openProp);\n    const direction = useDirection();\n\n    const closePreview = useCallback(() => {\n      setOpen(false);\n      previewTriggerRef.current?.focus();\n    }, []);\n\n    useEffect(() => {\n      setOpen(openProp);\n    }, [openProp]);\n\n    useEffect(() => {\n      if (openProp && closeButtonEl) {\n        closeButtonEl.focus();\n      }\n    }, [openProp, closeButtonEl]);\n\n    return (\n      <Drawer\n        data-testid={testIds.root}\n        {...restProps}\n        as={StyledPreviewDrawer}\n        role='complementary'\n        forwardedAs={Flex}\n        container={{ direction: 'column' }}\n        ref={ref}\n        open={open && isSmallOrAbove}\n        position='fixed'\n        placement={direction.end}\n        aria-label={t('preview_of_noun', [heading])}\n        shadow\n        nullWhenClosed\n      >\n        <StyledPreviewActions>\n          <Button\n            data-testid={testIds.close}\n            variant='simple'\n            icon\n            onClick={closePreview}\n            ref={setCloseButtonEl}\n            label={t('close_preview')}\n          >\n            <Icon name='times' />\n          </Button>\n        </StyledPreviewActions>\n\n        <CaseView\n          caseId={caseId}\n          parentCases={parentCases}\n          heading={heading}\n          subheading={subheading}\n          caseLink={caseLink}\n          icon={icon}\n          followed={followed}\n          onFollowedChange={onFollowedChange}\n          summaryFields={summaryFields}\n          tabs={tabs}\n          stages={stages}\n          tasks={tasks}\n          tabContent={tabContent}\n          utilities={utilities}\n          utilitiesSummaryItems={utilitiesSummaryItems}\n          actions={actions}\n          banners={banners}\n          onEdit={onEdit}\n          isPreview\n        />\n      </Drawer>\n    );\n  }\n);\n\nexport default withTestIds(CasePreview, getCasePreviewTestIds);\n"]}

package/lib/components/CasePreview/CasePreview.test-ids.d.ts

@@ -0,0 +1,2 @@
+export declare const getCasePreviewTestIds: (testIdProp?: string | undefined) => import("@pega/cosmos-react-core").TestIdsRecord<readonly ["close"]>;
+//# sourceMappingURL=CasePreview.test-ids.d.ts.map

package/lib/components/CasePreview/CasePreview.test-ids.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CasePreview.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/CasePreview/CasePreview.test-ids.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,qBAAqB,0GAAoD,CAAC"}

package/lib/components/CasePreview/CasePreview.test-ids.js

@@ -0,0 +1,3 @@
+import { createTestIds } from '@pega/cosmos-react-core';
+export const getCasePreviewTestIds = createTestIds('case-preview', ['close']);
+//# sourceMappingURL=CasePreview.test-ids.js.map

package/lib/components/CasePreview/CasePreview.test-ids.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CasePreview.test-ids.js","sourceRoot":"","sources":["../../../src/components/CasePreview/CasePreview.test-ids.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAExD,MAAM,CAAC,MAAM,qBAAqB,GAAG,aAAa,CAAC,cAAc,EAAE,CAAC,OAAO,CAAU,CAAC,CAAC","sourcesContent":["import { createTestIds } from '@pega/cosmos-react-core';\n\nexport const getCasePreviewTestIds = createTestIds('case-preview', ['close'] as const);\n"]}

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

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

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

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

package/lib/components/CasePreview/index.js

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

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

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

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

@@ -0,0 +1,4 @@
+import type { FC } from 'react';
+declare const CaseHeader: FC;
+export default CaseHeader;
+//# sourceMappingURL=CaseHeader.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CaseHeader.d.ts","sourceRoot":"","sources":["../../../../src/components/CaseView/CaseHeader/CaseHeader.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAc,MAAM,OAAO,CAAC;AAsC5C,QAAA,MAAM,UAAU,EAAE,EAuRjB,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/lib/components/CaseView/CaseHeader/CaseHeader.js

@@ -0,0 +1,127 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { parseToHsl } from 'polished';
+import { Breadcrumbs, Flex, getEdge, Icon, registerIcon, Text, Link, Button, MenuButton, throttle, useDirection, useI18n, useAfterInitialEffect, useTheme, tryCatch } from '@pega/cosmos-react-core';
+import * as pencilIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/pencil.icon';
+import * as moreIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/more.icon';
+import { StyledCaseHeader, StyledCaseHeaderText, StyledExpandCollapseSummaryButton, StyledSubheading, StyledHeaderActions, StyledCaseHeaderPromotedAction } from '../CaseView.styles';
+import { useCaseViewContext } from '../CaseView.context';
+import Summary from './Summary';
+registerIcon(pencilIcon, moreIcon);
+const CaseHeader = () => {
+    const t = useI18n();
+    const { ltr } = useDirection();
+    const theme = useTheme();
+    const { testIds, caseId, icon, heading, subheading, actions, caseLink, parentCases, onEdit, followed, onFollowedChange, promotedActions, summaryExpanded, summaryFields, onToggleSummary, isPreview, aboveSM, aboveMD, persistentUtility } = useCaseViewContext();
+    const [wrapPromotedActions, setWrapPromotedActions] = useState(false);
+    const [summaryResetID, setSummaryResetID] = useState(Math.random());
+    const wrapActionsBreakpoint = useRef(null);
+    const iconBackground = useMemo(() => {
+        return 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)';
+        });
+    }, [theme]);
+    const contentsEl = useRef(null);
+    const headerGroupEl = useRef(null);
+    const actionsContainerEl = useRef(null);
+    const toggleButtonRef = useRef(null);
+    const caseActions = actions
+        ? actions.map(action => {
+            return {
+                ...action,
+                primary: action.text,
+                visual: action.icon ? _jsx(Icon, { name: action.icon }) : null
+            };
+        })
+        : undefined;
+    const showExpandCollapse = !isPreview && aboveMD;
+    const collapsedMainHeader = (!isPreview && !aboveMD && aboveSM) || (showExpandCollapse && !summaryExpanded);
+    // FIXME: This is a hack to get the Tooltip to reset its position when the summary changes layout.
+    useAfterInitialEffect(() => {
+        if (toggleButtonRef.current && toggleButtonRef.current === document.activeElement) {
+            toggleButtonRef.current.blur();
+            setTimeout(() => {
+                toggleButtonRef.current?.focus();
+            }, 0);
+        }
+    }, [summaryExpanded]);
+    // Actions wrapping
+    useLayoutEffect(() => {
+        if (!wrapPromotedActions &&
+            contentsEl.current &&
+            headerGroupEl.current &&
+            actionsContainerEl.current) {
+            const contentStart = getEdge({
+                el: contentsEl.current,
+                side: 'leading',
+                ltr
+            });
+            const headerGroupEnd = getEdge({
+                el: headerGroupEl.current,
+                side: 'trailing',
+                ltr
+            });
+            const actionsContainerWidth = actionsContainerEl.current.getBoundingClientRect().width;
+            wrapActionsBreakpoint.current =
+                Math.ceil(headerGroupEnd) - Math.ceil(contentStart) + Math.ceil(actionsContainerWidth);
+        }
+        const promotedActionsWrapHandler = () => {
+            if (wrapActionsBreakpoint.current && contentsEl.current) {
+                setWrapPromotedActions(Math.ceil(contentsEl.current.offsetWidth) < wrapActionsBreakpoint.current);
+            }
+        };
+        const resizeObserver = new ResizeObserver(throttle(promotedActionsWrapHandler, 30));
+        promotedActionsWrapHandler();
+        if (contentsEl.current) {
+            resizeObserver.observe(contentsEl.current, { box: 'border-box' });
+        }
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, [
+        contentsEl,
+        headerGroupEl,
+        actionsContainerEl,
+        promotedActions,
+        heading,
+        subheading,
+        wrapPromotedActions
+    ]);
+    // Reset summary
+    useEffect(() => {
+        setSummaryResetID(Math.random());
+    }, [heading, summaryFields, promotedActions]);
+    return (_jsxs(Flex, { "data-testid": testIds.header, as: StyledCaseHeader, container: { direction: 'column', gap: 1.5 }, children: [_jsxs(Flex, { container: true, ref: contentsEl, children: [showExpandCollapse && onToggleSummary && !persistentUtility && (_jsx(StyledExpandCollapseSummaryButton, { ref: toggleButtonRef, onClick: onToggleSummary, label: t(summaryExpanded ? 'collapse' : 'expand'), "aria-label": t(summaryExpanded ? 'collapse_summary' : 'expand_summary'), icon: true, compact: true, children: _jsx(Icon, { name: 'arrow-micro-left' }) })), icon && (_jsx(Flex, { container: { pad: [1, 0, 0] }, item: { shrink: 0 }, children: _jsx(Icon, { "data-testid": testIds.icon, name: icon, background: iconBackground }) })), _jsxs(Flex, { as: StyledCaseHeaderText, container: {
+                            direction: 'column',
+                            pad: [0.5, 2, 0.5, 1.5],
+                            alignItems: 'start'
+                        }, item: aboveSM ? { shrink: wrapPromotedActions ? 1 : 0 } : { shrink: 1, grow: 1 }, ref: headerGroupEl, children: [_jsx(Text, { "data-testid": testIds.heading, variant: 'h1', children: caseLink ? _jsx(Link, { ...caseLink, children: heading }) : heading }), subheading && (!parentCases || subheading !== caseId) && (_jsx(StyledSubheading, { "data-testid": testIds.subheading, children: subheading })), parentCases && (_jsx(Breadcrumbs, { forwardedAs: 'p', path: [
+                                    ...parentCases,
+                                    {
+                                        ...caseLink,
+                                        id: caseId,
+                                        primary: caseId,
+                                        href: caseLink?.href
+                                    }
+                                ], leafOnly: true }))] }), collapsedMainHeader && !wrapPromotedActions && (_jsx(Summary, { siblingRef: actionsContainerEl }, summaryResetID)), _jsxs(Flex, { as: StyledHeaderActions, item: { shrink: 0 }, container: { alignItems: 'start', pad: [0, 0, 0, 2] }, offsetEnd: !summaryExpanded, ref: actionsContainerEl, children: [collapsedMainHeader &&
+                                !wrapPromotedActions &&
+                                promotedActions &&
+                                promotedActions.length > 0 ? (_jsx(_Fragment, { children: promotedActions.map(promotedAction => (_jsx(StyledCaseHeaderPromotedAction, { variant: 'secondary', onClick: (e) => promotedAction.onClick?.(promotedAction.id, e), children: promotedAction.text }, promotedAction.id))) })) : null, onEdit && (_jsx(Button, { "data-testid": testIds.edit, icon: true, variant: 'simple', onClick: onEdit, label: t('edit'), children: _jsx(Icon, { name: 'pencil' }) })), caseActions && (_jsx(MenuButton, { "data-testid": testIds.actions, icon: 'more', iconOnly: true, variant: 'simple', text: t('actions'), menu: {
+                                    items: followed !== undefined
+                                        ? [
+                                            {
+                                                id: 'follow',
+                                                primary: followed ? t('unfollow') : t('follow'),
+                                                onClick: () => onFollowedChange?.(!followed)
+                                            },
+                                            ...caseActions
+                                        ]
+                                        : caseActions,
+                                    scrollAt: 20
+                                } }))] })] }), (!collapsedMainHeader || wrapPromotedActions || !aboveSM) &&
+                promotedActions &&
+                promotedActions.length > 0 ? (_jsx(Flex, { "data-testid": testIds.promotedActions, container: { justify: 'start', wrap: 'wrap', gap: 1, pad: [0, 0, 0.5] }, children: promotedActions.map(({ id, text, onClick }) => (_jsx("div", { children: _jsx(StyledCaseHeaderPromotedAction, { variant: 'secondary', onClick: (e) => onClick?.(id, e), children: text }) }, text))) })) : null] }));
+};
+export default CaseHeader;
+//# sourceMappingURL=CaseHeader.js.map