@pega/cosmos-react-cs 5.0.0-dev.4.9 → 5.0.0-dev.5.0

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

@@ -0,0 +1,37 @@
+/// <reference types="react" />
+import { TaskManagerTabProps, DialogueProps } from './TaskManager.types';
+export declare const StyledTaskMain: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    current: boolean;
+}, never>;
+export declare const StyledTaskManagerTabsSummaryItem: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledHeader: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").CardHeaderProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledTaskManagerTabs: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledTaskSummaryItem: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyleTaskName: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledTaskManagerTab: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, TaskManagerTabProps, never>;
+export declare const StyledTasksTabList: import("styled-components").StyledComponent<"ul", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledStickyCardHeader: import("styled-components").StyledComponent<"header", import("styled-components").DefaultTheme, import("@pega/cosmos-react-core").CardHeaderProps, never>;
+export declare const StyledOverflowTabMenu: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").ForwardProps & import("@pega/cosmos-react-core").MenuButtonProps> & {
+    getTestIds: (testIdProp?: string | undefined) => import("@pega/cosmos-react-core").TestIdsRecord<readonly []>;
+}, import("styled-components").DefaultTheme, {}, never>;
+interface StyledTaskManagerProps {
+    hasDrawer?: boolean;
+    hasTasks?: boolean;
+}
+export declare const StyledTaskManager: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, StyledTaskManagerProps, never>;
+export declare const StyledTaskManagerBanner: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledPopover: import("styled-components").StyledComponent<(<Modifiers extends string = string>(props: import("@pega/cosmos-react-core").PopoverProps<Modifiers> & import("@pega/cosmos-react-core").ForwardProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null), import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledAgentScriptIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@pega/cosmos-react-core").IconProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledSymbol: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    verbatimStatus?: DialogueProps['verbatimStatus'];
+}, never>;
+export declare const StyledIconWrap: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    verbatimStatus?: DialogueProps['verbatimStatus'];
+}, never>;
+export declare const StyledCountBadge: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("@pega/cosmos-react-core").CountProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>> & {
+    getTestIds: (testIdProp?: string | undefined) => import("@pega/cosmos-react-core").TestIdsRecord<readonly []>;
+}, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledEntityPopover: import("styled-components").StyledComponent<(<Modifiers extends string = string>(props: import("@pega/cosmos-react-core").PopoverProps<Modifiers> & import("@pega/cosmos-react-core").ForwardProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null), import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export default StyledTaskManager;
+//# sourceMappingURL=TaskManager.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TaskManager.styles.d.ts","sourceRoot":"","sources":["../../../src/components/TaskManager/TaskManager.styles.ts"],"names":[],"mappings":";AAwBA,OAAO,EAAE,mBAAmB,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAEzE,eAAO,MAAM,cAAc;aAAyB,OAAO;SAOzD,CAAC;AAEH,eAAO,MAAM,gCAAgC,yGAAe,CAAC;AAC7D,eAAO,MAAM,YAAY,yOAAuB,CAAC;AAEjD,eAAO,MAAM,qBAAqB,yGAchC,CAAC;AAIH,eAAO,MAAM,qBAAqB,wGAWhC,CAAC;AAIH,eAAO,MAAM,aAAa,0GAMxB,CAAC;AAIH,eAAO,MAAM,oBAAoB,yHAmE/B,CAAC;AAIH,eAAO,MAAM,kBAAkB,wGA2B7B,CAAC;AAIH,eAAO,MAAM,sBAAsB,2JASjC,CAAC;AAIH,eAAO,MAAM,qBAAqB;;uDAIhC,CAAC;AAIH,UAAU,sBAAsB;IAC9B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,iBAAiB,6HAiE7B,CAAC;AAIF,eAAO,MAAM,uBAAuB,yGAkBlC,CAAC;AAIH,eAAO,MAAM,aAAa,6VAIxB,CAAC;AAIH,eAAO,MAAM,qBAAqB,0LAAiB,CAAC;AAEpD,eAAO,MAAM,YAAY;qBACN,aAAa,CAAC,gBAAgB,CAAC;SA4BjD,CAAC;AAIF,eAAO,MAAM,cAAc;qBACR,aAAa,CAAC,gBAAgB,CAAC;SAkCjD,CAAC;AAIF,eAAO,MAAM,gBAAgB;;uDAkB5B,CAAC;AAIF,eAAO,MAAM,mBAAmB,6VAU/B,CAAC;AAIF,eAAO,MAAM,aAAa,yGAUxB,CAAC;AAIH,eAAe,iBAAiB,CAAC"}

package/lib/components/TaskManager/TaskManager.styles.js

@@ -0,0 +1,325 @@
+import styled, { css } from 'styled-components';
+import { mix, readableColor, transparentize } from 'polished';
+import { defaultThemeProp, MenuButton, Popover, tryCatch, StyledCard, StyledEmptyState, StyledFlex, Icon, Count, CardHeader, readableHue, StyledButton } from '@pega/cosmos-react-core';
+import { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';
+import { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';
+import { StyledStatus } from '@pega/cosmos-react-core/lib/components/Badges/Status';
+import { StyledVisual } from '@pega/cosmos-react-core/lib/components/SummaryItem/SummaryItem';
+import { StyledDialog } from '@pega/cosmos-react-core/lib/components/Dialog/Dialog.styles';
+import { StyledFormDialog } from '@pega/cosmos-react-core/lib/components/Dialog/FormDialog';
+export const StyledTaskMain = styled.div(({ current }) => {
+    return css `
+    ${!current &&
+        css `
+      display: none;
+    `}
+  `;
+});
+export const StyledTaskManagerTabsSummaryItem = styled.div ``;
+export const StyledHeader = styled(CardHeader) ``;
+export const StyledTaskManagerTabs = styled.div(({ theme }) => {
+    return css `
+    background-color: ${theme.base.palette['secondary-background']};
+    padding-inline-end: calc(2 * ${theme.base.spacing});
+
+    ::before {
+      content: '';
+      border-block-end: 0.0625rem solid ${theme.base.palette['border-line']};
+      height: 0.0625rem;
+      width: 100%;
+      position: absolute;
+      inset-block-end: 0;
+    }
+  `;
+});
+StyledTaskManagerTabs.defaultProps = defaultThemeProp;
+export const StyledTaskSummaryItem = styled.li(({ theme }) => {
+    const { base: { spacing } } = theme;
+    return css `
+    min-height: 2.5rem;
+    padding: ${spacing};
+    &:not(:last-child) {
+      border-block-end: 0.0625rem solid ${theme.base.palette['border-line']};
+    }
+  `;
+});
+StyledTaskSummaryItem.defaultProps = defaultThemeProp;
+export const StyleTaskName = styled.span(() => {
+    return css `
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  `;
+});
+StyleTaskName.defaultProps = defaultThemeProp;
+export const StyledTaskManagerTab = styled.li(({ active = false, theme }) => {
+    const hoverColor = tryCatch(() => mix(0.85, theme.base.palette['primary-background'], theme.base.palette.interactive));
+    return css `
+    min-width: max-content;
+    white-space: nowrap;
+    border-inline-end: 0.065rem solid ${theme.base.palette['border-line']};
+    text-align: start;
+    outline: none;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    position: relative;
+    min-height: 2.5rem;
+    cursor: pointer;
+    padding-block: calc(0.5 * ${theme.base.spacing});
+    padding-inline: calc(2 * ${theme.base.spacing});
+    background-color: ${active &&
+        css `
+      ${theme.base.palette['primary-background']};
+    `};
+
+    & + & {
+      margin-inline-start: 0;
+    }
+
+    > ${StyledTaskManagerTabsSummaryItem} {
+      overflow-x: hidden;
+    }
+
+    > ${StyledTaskManagerTabsSummaryItem} > ${StyledVisual} {
+      ${active &&
+        css `
+        background: ${theme.base.palette.interactive};
+        color: ${theme.base.colors.white};
+      `}
+    }
+    ${active &&
+        css `
+      ::after {
+        position: absolute;
+        content: '';
+        height: 0.0625rem;
+        width: 100%;
+        background-color: ${theme.base.palette['primary-background']};
+        inset-inline-start: 0;
+        inset-block-end: 0;
+      }
+    `}
+
+    &:hover,
+    &:focus {
+      background-color: ${hoverColor};
+      ::after {
+        background-color: ${hoverColor};
+      }
+      box-shadow: none;
+    }
+    &:focus {
+      box-shadow: ${theme.base.shadow['focus-inset']};
+    }
+
+    > ${StyledFlex} {
+      max-width: 100%;
+    }
+  `;
+});
+StyledTaskManagerTab.defaultProps = defaultThemeProp;
+export const StyledTasksTabList = styled.ul(({ theme }) => {
+    const primaryColor = theme.base.palette.interactive;
+    const lightenedColor = tryCatch(() => transparentize(0.5, primaryColor)) ?? '';
+    return css `
+    position: relative;
+    display: flex;
+    flex-grow: 1;
+    overflow: scroll;
+    -ms-overflow-style: none;
+    &::-webkit-scrollbar {
+      display: none;
+    }
+    scrollbar-width: none;
+    &:has(:focus-visible) {
+      box-shadow: ${theme.base.shadow['focus-group']};
+    }
+    ${StyledTaskManagerTab} {
+      margin-inline-start: 0;
+      &:hover,
+      &:focus {
+        ::before {
+          display: block;
+          background-color: ${lightenedColor};
+        }
+      }
+    }
+  `;
+});
+StyledTasksTabList.defaultProps = defaultThemeProp;
+export const StyledStickyCardHeader = styled(StyledCardHeader)(({ theme }) => {
+    const primaryBackgroundColor = theme.base.palette['primary-background'];
+    return css `
+    inset-block-start: 0;
+    inset-inline-start: 0;
+    background: ${primaryBackgroundColor};
+    height: calc(3.5rem - 0.0625rem);
+    border-block-end: 0.0625rem solid ${theme.base.palette['border-line']};
+  `;
+});
+StyledStickyCardHeader.defaultProps = defaultThemeProp;
+export const StyledOverflowTabMenu = styled(MenuButton)(() => {
+    return css `
+    align-self: center;
+  `;
+});
+StyledOverflowTabMenu.defaultProps = defaultThemeProp;
+export const StyledTaskManager = styled.div(({ theme: { base: { shadow, spacing, palette, 'border-radius': borderRadius } }, hasDrawer, hasTasks }) => {
+    const primaryBackgroundColor = palette['primary-background'];
+    return css `
+      background: ${primaryBackgroundColor};
+      position: relative;
+      border-radius: ${borderRadius};
+      ${hasDrawer &&
+        css `
+        box-shadow: ${shadow.low};
+      `}
+
+      ${StyledDialog}${StyledFormDialog} ${StyledCardContent} {
+        padding-inline: 0;
+      }
+
+      ${StyledStatus} {
+        line-height: calc(${spacing} * 2);
+        height: calc(${spacing} * 2);
+        font-size: 0.7rem;
+      }
+
+      ${StyledCardHeader} {
+        ${!hasTasks &&
+        css `
+          border-block-end: none;
+          border-end-start-radius: inherit;
+          border-end-end-radius: inherit;
+        `}
+
+        ${StyledButton} {
+          gap: ${spacing};
+        }
+      }
+
+      && > ${StyledCard} > ${StyledCardContent} {
+        padding: 0;
+      }
+      ${StyledTaskMain} {
+        padding: 0 calc(2 * ${spacing}) calc(2 * ${spacing});
+        ${StyledCardHeader} {
+          padding: calc(2 * ${spacing}) 0 ${spacing};
+          margin-block-end: ${spacing};
+          border-block-end: none;
+        }
+      }
+      ${StyledEmptyState} {
+        padding: calc(2 * ${spacing});
+      }
+      ${StyledTaskManagerTabs} {
+        position: relative;
+      }
+      ${StyledTaskManagerTab} {
+        > ${StyledTaskManagerTabsSummaryItem} > ${StyledVisual} {
+          margin: 0 calc(2 * ${spacing});
+        }
+      }
+    `;
+});
+StyledTaskManager.defaultProps = defaultThemeProp;
+export const StyledTaskManagerBanner = styled.div(({ theme }) => {
+    const color = readableHue(theme.base.colors.orange.dark, theme.base.palette['secondary-background']);
+    return css `
+    padding: calc(1.5 * ${theme.base.spacing});
+    border-radius: ${theme.base['border-radius']} ${theme.base['border-radius']} 0 0;
+    background-color: ${theme.base.palette['secondary-background']};
+    gap: ${theme.base.spacing};
+    min-height: calc(7 * ${theme.base.spacing});
+    color: ${color};
+    font-weight: ${theme.base['font-weight'].bold};
+    & + ${StyledTaskManager} {
+      margin-block-start: 0;
+    }
+  `;
+});
+StyledTaskManagerBanner.defaultProps = defaultThemeProp;
+export const StyledPopover = styled(Popover)(({ theme }) => {
+    return css `
+    border-radius: ${theme.base['border-radius']};
+  `;
+});
+StyledPopover.defaultProps = defaultThemeProp;
+export const StyledAgentScriptIcon = styled(Icon) ``;
+export const StyledSymbol = styled.div(({ theme: { base: { spacing, palette, animation: { speed, timing } } }, verbatimStatus }) => {
+    const backgroundColor = verbatimStatus === 'pending' ? palette.urgent : palette.success;
+    return css `
+      color: ${palette['primary-background']};
+      border-radius: 50%;
+      border: 0.0625rem solid ${palette['primary-background']};
+      inset-block-start: calc(-1 * ${spacing});
+      inset-inline-end: calc(-1 * ${spacing});
+      position: absolute;
+      height: 1.25rem;
+      width: 1.25rem;
+      background-color: ${backgroundColor};
+      transition: background-color ${speed} ${timing.ease};
+      user-select: none;
+      -webkit-user-select: none;
+    `;
+});
+StyledSymbol.defaultProps = defaultThemeProp;
+export const StyledIconWrap = styled.div(({ theme: { base: { colors, animation: { speed, timing } } }, verbatimStatus }) => {
+    const backgroundColor = verbatimStatus === 'pending' ? colors.red['extra-light'] : colors.slate.medium;
+    const scriptIconColor = tryCatch(() => readableColor(backgroundColor));
+    return css `
+      height: 2rem;
+      width: 2rem;
+      border-radius: 50%;
+      background-color: ${backgroundColor};
+      transition: background-color ${speed} ${timing.ease};
+
+      ${StyledAgentScriptIcon} {
+        width: 1.5rem;
+        height: 1.5rem;
+        color: ${scriptIconColor};
+        transition: color ${speed} ${timing.ease};
+      }
+
+      ${verbatimStatus &&
+        css `
+        position: relative;
+      `}
+    `;
+});
+StyledIconWrap.defaultProps = defaultThemeProp;
+export const StyledCountBadge = styled(Count)(({ theme: { base: { spacing } } }) => {
+    return css `
+      position: absolute;
+      inset-inline-start: calc(2 * ${spacing});
+      inset-block-start: calc(-1 * ${spacing});
+      padding: 0 calc(0.5 * ${spacing});
+
+      @media (pointer: coarse) {
+        inset-inline-start: calc(2.5 * ${spacing});
+        inset-block-start: calc(1 * ${spacing});
+      }
+    `;
+});
+StyledCountBadge.defaultProps = defaultThemeProp;
+export const StyledEntityPopover = styled(Popover)(({ theme: { base: { 'content-width': contentWidth } } }) => {
+    return css `
+      width: ${contentWidth.sm};
+    `;
+});
+StyledEntityPopover.defaultProps = defaultThemeProp;
+export const StyledContent = styled.div(({ theme }) => {
+    return css `
+    max-height: 18rem;
+    overflow: auto;
+    ${StyledCard} {
+      ${StyledCardContent} {
+        padding: 0 calc(${theme.components.card.padding} * 2) calc(1.5 * ${theme.base.spacing});
+      }
+    }
+  `;
+});
+StyledContent.defaultProps = defaultThemeProp;
+export default StyledTaskManager;
+//# sourceMappingURL=TaskManager.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TaskManager.styles.js","sourceRoot":"","sources":["../../../src/components/TaskManager/TaskManager.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { mix, readableColor, transparentize } from 'polished';\n\nimport {\n  defaultThemeProp,\n  MenuButton,\n  Popover,\n  tryCatch,\n  StyledCard,\n  StyledEmptyState,\n  StyledFlex,\n  Icon,\n  Count,\n  CardHeader,\n  readableHue,\n  StyledButton\n} from '@pega/cosmos-react-core';\nimport { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';\nimport { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';\nimport { StyledStatus } from '@pega/cosmos-react-core/lib/components/Badges/Status';\nimport { StyledVisual } from '@pega/cosmos-react-core/lib/components/SummaryItem/SummaryItem';\nimport { StyledDialog } from '@pega/cosmos-react-core/lib/components/Dialog/Dialog.styles';\nimport { StyledFormDialog } from '@pega/cosmos-react-core/lib/components/Dialog/FormDialog';\n\nimport { TaskManagerTabProps, DialogueProps } from './TaskManager.types';\n\nexport const StyledTaskMain = styled.div<{ current: boolean }>(({ current }) => {\n  return css`\n    ${!current &&\n    css`\n      display: none;\n    `}\n  `;\n});\n\nexport const StyledTaskManagerTabsSummaryItem = styled.div``;\nexport const StyledHeader = styled(CardHeader)``;\n\nexport const StyledTaskManagerTabs = styled.div(({ theme }) => {\n  return css`\n    background-color: ${theme.base.palette['secondary-background']};\n    padding-inline-end: calc(2 * ${theme.base.spacing});\n\n    ::before {\n      content: '';\n      border-block-end: 0.0625rem solid ${theme.base.palette['border-line']};\n      height: 0.0625rem;\n      width: 100%;\n      position: absolute;\n      inset-block-end: 0;\n    }\n  `;\n});\n\nStyledTaskManagerTabs.defaultProps = defaultThemeProp;\n\nexport const StyledTaskSummaryItem = styled.li(({ theme }) => {\n  const {\n    base: { spacing }\n  } = theme;\n  return css`\n    min-height: 2.5rem;\n    padding: ${spacing};\n    &:not(:last-child) {\n      border-block-end: 0.0625rem solid ${theme.base.palette['border-line']};\n    }\n  `;\n});\n\nStyledTaskSummaryItem.defaultProps = defaultThemeProp;\n\nexport const StyleTaskName = styled.span(() => {\n  return css`\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  `;\n});\n\nStyleTaskName.defaultProps = defaultThemeProp;\n\nexport const StyledTaskManagerTab = styled.li<TaskManagerTabProps>(({ active = false, theme }) => {\n  const hoverColor = tryCatch(() =>\n    mix(0.85, theme.base.palette['primary-background'], theme.base.palette.interactive)\n  );\n  return css`\n    min-width: max-content;\n    white-space: nowrap;\n    border-inline-end: 0.065rem solid ${theme.base.palette['border-line']};\n    text-align: start;\n    outline: none;\n    overflow: hidden;\n    display: flex;\n    align-items: center;\n    position: relative;\n    min-height: 2.5rem;\n    cursor: pointer;\n    padding-block: calc(0.5 * ${theme.base.spacing});\n    padding-inline: calc(2 * ${theme.base.spacing});\n    background-color: ${active &&\n    css`\n      ${theme.base.palette['primary-background']};\n    `};\n\n    & + & {\n      margin-inline-start: 0;\n    }\n\n    > ${StyledTaskManagerTabsSummaryItem} {\n      overflow-x: hidden;\n    }\n\n    > ${StyledTaskManagerTabsSummaryItem} > ${StyledVisual} {\n      ${active &&\n      css`\n        background: ${theme.base.palette.interactive};\n        color: ${theme.base.colors.white};\n      `}\n    }\n    ${active &&\n    css`\n      ::after {\n        position: absolute;\n        content: '';\n        height: 0.0625rem;\n        width: 100%;\n        background-color: ${theme.base.palette['primary-background']};\n        inset-inline-start: 0;\n        inset-block-end: 0;\n      }\n    `}\n\n    &:hover,\n    &:focus {\n      background-color: ${hoverColor};\n      ::after {\n        background-color: ${hoverColor};\n      }\n      box-shadow: none;\n    }\n    &:focus {\n      box-shadow: ${theme.base.shadow['focus-inset']};\n    }\n\n    > ${StyledFlex} {\n      max-width: 100%;\n    }\n  `;\n});\n\nStyledTaskManagerTab.defaultProps = defaultThemeProp;\n\nexport const StyledTasksTabList = styled.ul(({ theme }) => {\n  const primaryColor = theme.base.palette.interactive;\n  const lightenedColor = tryCatch(() => transparentize(0.5, primaryColor)) ?? '';\n  return css`\n    position: relative;\n    display: flex;\n    flex-grow: 1;\n    overflow: scroll;\n    -ms-overflow-style: none;\n    &::-webkit-scrollbar {\n      display: none;\n    }\n    scrollbar-width: none;\n    &:has(:focus-visible) {\n      box-shadow: ${theme.base.shadow['focus-group']};\n    }\n    ${StyledTaskManagerTab} {\n      margin-inline-start: 0;\n      &:hover,\n      &:focus {\n        ::before {\n          display: block;\n          background-color: ${lightenedColor};\n        }\n      }\n    }\n  `;\n});\n\nStyledTasksTabList.defaultProps = defaultThemeProp;\n\nexport const StyledStickyCardHeader = styled(StyledCardHeader)(({ theme }) => {\n  const primaryBackgroundColor = theme.base.palette['primary-background'];\n  return css`\n    inset-block-start: 0;\n    inset-inline-start: 0;\n    background: ${primaryBackgroundColor};\n    height: calc(3.5rem - 0.0625rem);\n    border-block-end: 0.0625rem solid ${theme.base.palette['border-line']};\n  `;\n});\n\nStyledStickyCardHeader.defaultProps = defaultThemeProp;\n\nexport const StyledOverflowTabMenu = styled(MenuButton)(() => {\n  return css`\n    align-self: center;\n  `;\n});\n\nStyledOverflowTabMenu.defaultProps = defaultThemeProp;\n\ninterface StyledTaskManagerProps {\n  hasDrawer?: boolean;\n  hasTasks?: boolean;\n}\n\nexport const StyledTaskManager = styled.div<StyledTaskManagerProps>(\n  ({\n    theme: {\n      base: { shadow, spacing, palette, 'border-radius': borderRadius }\n    },\n    hasDrawer,\n    hasTasks\n  }) => {\n    const primaryBackgroundColor = palette['primary-background'];\n    return css`\n      background: ${primaryBackgroundColor};\n      position: relative;\n      border-radius: ${borderRadius};\n      ${hasDrawer &&\n      css`\n        box-shadow: ${shadow.low};\n      `}\n\n      ${StyledDialog}${StyledFormDialog} ${StyledCardContent} {\n        padding-inline: 0;\n      }\n\n      ${StyledStatus} {\n        line-height: calc(${spacing} * 2);\n        height: calc(${spacing} * 2);\n        font-size: 0.7rem;\n      }\n\n      ${StyledCardHeader} {\n        ${!hasTasks &&\n        css`\n          border-block-end: none;\n          border-end-start-radius: inherit;\n          border-end-end-radius: inherit;\n        `}\n\n        ${StyledButton} {\n          gap: ${spacing};\n        }\n      }\n\n      && > ${StyledCard} > ${StyledCardContent} {\n        padding: 0;\n      }\n      ${StyledTaskMain} {\n        padding: 0 calc(2 * ${spacing}) calc(2 * ${spacing});\n        ${StyledCardHeader} {\n          padding: calc(2 * ${spacing}) 0 ${spacing};\n          margin-block-end: ${spacing};\n          border-block-end: none;\n        }\n      }\n      ${StyledEmptyState} {\n        padding: calc(2 * ${spacing});\n      }\n      ${StyledTaskManagerTabs} {\n        position: relative;\n      }\n      ${StyledTaskManagerTab} {\n        > ${StyledTaskManagerTabsSummaryItem} > ${StyledVisual} {\n          margin: 0 calc(2 * ${spacing});\n        }\n      }\n    `;\n  }\n);\n\nStyledTaskManager.defaultProps = defaultThemeProp;\n\nexport const StyledTaskManagerBanner = styled.div(({ theme }) => {\n  const color = readableHue(\n    theme.base.colors.orange.dark,\n    theme.base.palette['secondary-background']\n  );\n\n  return css`\n    padding: calc(1.5 * ${theme.base.spacing});\n    border-radius: ${theme.base['border-radius']} ${theme.base['border-radius']} 0 0;\n    background-color: ${theme.base.palette['secondary-background']};\n    gap: ${theme.base.spacing};\n    min-height: calc(7 * ${theme.base.spacing});\n    color: ${color};\n    font-weight: ${theme.base['font-weight'].bold};\n    & + ${StyledTaskManager} {\n      margin-block-start: 0;\n    }\n  `;\n});\n\nStyledTaskManagerBanner.defaultProps = defaultThemeProp;\n\nexport const StyledPopover = styled(Popover)(({ theme }) => {\n  return css`\n    border-radius: ${theme.base['border-radius']};\n  `;\n});\n\nStyledPopover.defaultProps = defaultThemeProp;\n\nexport const StyledAgentScriptIcon = styled(Icon)``;\n\nexport const StyledSymbol = styled.div<{\n  verbatimStatus?: DialogueProps['verbatimStatus'];\n}>(\n  ({\n    theme: {\n      base: {\n        spacing,\n        palette,\n        animation: { speed, timing }\n      }\n    },\n    verbatimStatus\n  }) => {\n    const backgroundColor = verbatimStatus === 'pending' ? palette.urgent : palette.success;\n    return css`\n      color: ${palette['primary-background']};\n      border-radius: 50%;\n      border: 0.0625rem solid ${palette['primary-background']};\n      inset-block-start: calc(-1 * ${spacing});\n      inset-inline-end: calc(-1 * ${spacing});\n      position: absolute;\n      height: 1.25rem;\n      width: 1.25rem;\n      background-color: ${backgroundColor};\n      transition: background-color ${speed} ${timing.ease};\n      user-select: none;\n      -webkit-user-select: none;\n    `;\n  }\n);\n\nStyledSymbol.defaultProps = defaultThemeProp;\n\nexport const StyledIconWrap = styled.div<{\n  verbatimStatus?: DialogueProps['verbatimStatus'];\n}>(\n  ({\n    theme: {\n      base: {\n        colors,\n        animation: { speed, timing }\n      }\n    },\n    verbatimStatus\n  }) => {\n    const backgroundColor =\n      verbatimStatus === 'pending' ? colors.red['extra-light'] : colors.slate.medium;\n    const scriptIconColor = tryCatch(() => readableColor(backgroundColor));\n    return css`\n      height: 2rem;\n      width: 2rem;\n      border-radius: 50%;\n      background-color: ${backgroundColor};\n      transition: background-color ${speed} ${timing.ease};\n\n      ${StyledAgentScriptIcon} {\n        width: 1.5rem;\n        height: 1.5rem;\n        color: ${scriptIconColor};\n        transition: color ${speed} ${timing.ease};\n      }\n\n      ${verbatimStatus &&\n      css`\n        position: relative;\n      `}\n    `;\n  }\n);\n\nStyledIconWrap.defaultProps = defaultThemeProp;\n\nexport const StyledCountBadge = styled(Count)(\n  ({\n    theme: {\n      base: { spacing }\n    }\n  }) => {\n    return css`\n      position: absolute;\n      inset-inline-start: calc(2 * ${spacing});\n      inset-block-start: calc(-1 * ${spacing});\n      padding: 0 calc(0.5 * ${spacing});\n\n      @media (pointer: coarse) {\n        inset-inline-start: calc(2.5 * ${spacing});\n        inset-block-start: calc(1 * ${spacing});\n      }\n    `;\n  }\n);\n\nStyledCountBadge.defaultProps = defaultThemeProp;\n\nexport const StyledEntityPopover = styled(Popover)(\n  ({\n    theme: {\n      base: { 'content-width': contentWidth }\n    }\n  }) => {\n    return css`\n      width: ${contentWidth.sm};\n    `;\n  }\n);\n\nStyledEntityPopover.defaultProps = defaultThemeProp;\n\nexport const StyledContent = styled.div(({ theme }) => {\n  return css`\n    max-height: 18rem;\n    overflow: auto;\n    ${StyledCard} {\n      ${StyledCardContent} {\n        padding: 0 calc(${theme.components.card.padding} * 2) calc(1.5 * ${theme.base.spacing});\n      }\n    }\n  `;\n});\n\nStyledContent.defaultProps = defaultThemeProp;\n\nexport default StyledTaskManager;\n"]}

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

@@ -0,0 +1,98 @@
+import { ReactNode, Ref } from 'react';
+import { BaseProps, IconName, MenuItemProps, NoChildrenProp, StatusProps } from '@pega/cosmos-react-core';
+import { TaskPickerProps } from './TaskPicker';
+export interface HandleValue {
+    nudge: () => Animation | undefined;
+}
+export interface TaskManagerProps extends BaseProps, NoChildrenProp {
+    /** List of tasks */
+    tasks?: TaskProps[];
+    /** Callback when task is launched */
+    onTaskLaunch?: (id: TaskProps['id']) => void;
+    /** Callback when task is dismissed. Applicable only when task is not launched previously */
+    onTaskDismiss?: (id: TaskProps['id']) => void;
+    /** Add task utility */
+    addTask?: Pick<TaskPickerProps, 'items' | 'onAdd' | 'ref'>;
+    /** Banner for the task manager */
+    banner?: Pick<DialogueProps, 'icon' | 'content' | 'verbatimStatus'>;
+    /** Shows wrap up action when passed */
+    wrapUp?: {
+        /** Determines if wrap up button should be enabled */
+        disable: boolean;
+        /** Callback when wrap up is performed */
+        onClick: () => void;
+        /** Determines if wrap up is active */
+        active?: boolean;
+        /** Determines if wrap up tab should be shown or not */
+        showTab?: boolean;
+    };
+    /** Selected task content */
+    main?: ReactNode;
+    handle?: Ref<HandleValue>;
+    /** Conversation icon on TaskManager Header */
+    conversationAI?: Pick<ConversationAIProps, 'content' | 'entityCount'>;
+    ref?: Ref<HTMLDivElement>;
+}
+export interface TaskManagerTabsProps {
+    wrapUpTabId: string;
+    wrapUpTabPanelId: string;
+    ref?: Ref<HTMLDivElement>;
+}
+export interface TaskManagerTabProps {
+    active?: boolean;
+    variant?: string;
+}
+export interface TaskViewProps extends BaseProps {
+    /** Task header */
+    header: ReactNode;
+    /** Task specific actions */
+    actions?: ReactNode;
+    /** Task form content */
+    children: ReactNode;
+    ref?: Ref<HTMLDivElement>;
+}
+export interface DialogueProps extends BaseProps {
+    /** Icon for the banner */
+    icon: IconName;
+    /** Banner content */
+    content: string;
+    /** Type of banner icon */
+    verbatimStatus?: 'pending' | 'spoken';
+    handle?: Ref<HandleValue>;
+    ref?: Ref<HTMLDivElement>;
+}
+export interface ConversationAIProps extends BaseProps {
+    /** Content */
+    content: ReactNode;
+    /** Number of entities captured */
+    entityCount: number;
+    ref?: Ref<HTMLDivElement>;
+}
+export interface TaskManagerContextProps extends Pick<TaskManagerProps, 'tasks' | 'addTask' | 'onTaskLaunch' | 'wrapUp'> {
+}
+export interface TaskProps {
+    /** Unique id for tasks list */
+    id: string;
+    /** Name of the task */
+    name: string;
+    /** Meta info of the task ex: Queued task */
+    meta?: string;
+    /** Secondary information to show with the task name. Eg: CaseId. */
+    secondary?: MenuItemProps['secondary'];
+    /** Name of the icon (to be selected from default Pega icon set) */
+    icon: string;
+    /** Determines to show the task in tab. */
+    hideFromTab?: boolean;
+    /** Determines the active task */
+    active?: boolean;
+    /** Determines if a task is resolved */
+    isResolved?: boolean;
+    /** Represents the current status of task(like resolved-completed, InProgress etc) */
+    status?: {
+        /** Status text */
+        text: string;
+        /** Status variant */
+        variant: StatusProps['variant'];
+    };
+}
+//# sourceMappingURL=TaskManager.types.d.ts.map

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

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

package/lib/components/TaskManager/TaskManager.types.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"TaskManager.types.js","sourceRoot":"","sources":["../../../src/components/TaskManager/TaskManager.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ReactNode, Ref } from 'react';\n\nimport {\n  BaseProps,\n  IconName,\n  MenuItemProps,\n  NoChildrenProp,\n  StatusProps\n} from '@pega/cosmos-react-core';\n\nimport { TaskPickerProps } from './TaskPicker';\n\nexport interface HandleValue {\n  nudge: () => Animation | undefined;\n}\n\nexport interface TaskManagerProps extends BaseProps, NoChildrenProp {\n  /** List of tasks */\n  tasks?: TaskProps[];\n  /** Callback when task is launched */\n  onTaskLaunch?: (id: TaskProps['id']) => void;\n  /** Callback when task is dismissed. Applicable only when task is not launched previously */\n  onTaskDismiss?: (id: TaskProps['id']) => void;\n  /** Add task utility */\n  addTask?: Pick<TaskPickerProps, 'items' | 'onAdd' | 'ref'>;\n  /** Banner for the task manager */\n  banner?: Pick<DialogueProps, 'icon' | 'content' | 'verbatimStatus'>;\n  /** Shows wrap up action when passed */\n  wrapUp?: {\n    /** Determines if wrap up button should be enabled */\n    disable: boolean;\n    /** Callback when wrap up is performed */\n    onClick: () => void;\n    /** Determines if wrap up is active */\n    active?: boolean;\n    /** Determines if wrap up tab should be shown or not */\n    showTab?: boolean;\n  };\n  /** Selected task content */\n  main?: ReactNode;\n  handle?: Ref<HandleValue>;\n  /** Conversation icon on TaskManager Header */\n  conversationAI?: Pick<ConversationAIProps, 'content' | 'entityCount'>;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport interface TaskManagerTabsProps {\n  wrapUpTabId: string;\n  wrapUpTabPanelId: string;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport interface TaskManagerTabProps {\n  active?: boolean;\n  variant?: string;\n}\nexport interface TaskViewProps extends BaseProps {\n  /** Task header */\n  header: ReactNode;\n  /** Task specific actions */\n  actions?: ReactNode;\n  /** Task form content */\n  children: ReactNode;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport interface DialogueProps extends BaseProps {\n  /** Icon for the banner */\n  icon: IconName;\n  /** Banner content */\n  content: string;\n  /** Type of banner icon */\n  verbatimStatus?: 'pending' | 'spoken';\n  handle?: Ref<HandleValue>;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport interface ConversationAIProps extends BaseProps {\n  /** Content */\n  content: ReactNode;\n  /** Number of entities captured */\n  entityCount: number;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport interface TaskManagerContextProps\n  extends Pick<TaskManagerProps, 'tasks' | 'addTask' | 'onTaskLaunch' | 'wrapUp'> {}\n\nexport interface TaskProps {\n  /** Unique id for tasks list */\n  id: string;\n  /** Name of the task */\n  name: string;\n  /** Meta info of the task ex: Queued task */\n  meta?: string;\n  /** Secondary information to show with the task name. Eg: CaseId. */\n  secondary?: MenuItemProps['secondary'];\n  /** Name of the icon (to be selected from default Pega icon set) */\n  icon: string;\n  /** Determines to show the task in tab. */\n  hideFromTab?: boolean;\n  /** Determines the active task */\n  active?: boolean;\n  /** Determines if a task is resolved */\n  isResolved?: boolean;\n  /** Represents the current status of task(like resolved-completed, InProgress etc) */\n  status?: {\n    /** Status text */\n    text: string;\n    /** Status variant */\n    variant: StatusProps['variant'];\n  };\n}\n"]}

package/lib/components/TaskManager/TaskManagerTabs.d.ts

@@ -0,0 +1,6 @@
+import { FunctionComponent } from 'react';
+import { ForwardProps } from '@pega/cosmos-react-core';
+import { TaskManagerTabsProps } from './TaskManager.types';
+declare const TaskManagerTabs: FunctionComponent<TaskManagerTabsProps & ForwardProps>;
+export default TaskManagerTabs;
+//# sourceMappingURL=TaskManagerTabs.d.ts.map

package/lib/components/TaskManager/TaskManagerTabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TaskManagerTabs.d.ts","sourceRoot":"","sources":["../../../src/components/TaskManager/TaskManagerTabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EAYlB,MAAM,OAAO,CAAC;AAEf,OAAO,EAAa,YAAY,EAA4B,MAAM,yBAAyB,CAAC;AAW5F,OAAO,EAAE,oBAAoB,EAAa,MAAM,qBAAqB,CAAC;AAEtE,QAAA,MAAM,eAAe,EAAE,iBAAiB,CAAC,oBAAoB,GAAG,YAAY,CA2P3E,CAAC;AAEF,eAAe,eAAe,CAAC"}