npm - @pega/cosmos-react-cs - Versions diffs - 3.0.0-dev.10.1 → 3.0.0-dev.11.0 - Mend

@pega/cosmos-react-cs 3.0.0-dev.10.1 → 3.0.0-dev.11.0

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 (23) hide show

package/lib/components/CallControlPanel/ExternalCTI.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ExternalCTI.d.ts","sourceRoot":"","sources":["../../../src/components/CallControlPanel/ExternalCTI.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA6B,iBAAiB,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAG3F,OAAO,EAAoB,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAIzE,MAAM,WAAW,gBAAgB;IAC/B,4BAA4B;IAC5B,OAAO,EAAE,MAAM,CAAC;IAChB,gDAAgD;IAChD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oCAAoC;IACpC,IAAI,CAAC,EAAE;QACL,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,kCAAkC;IAClC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;~~AAwBD~~,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,~~CA0BnE~~,CAAC;AAEF,eAAe,WAAW,CAAC"}
1	+ {"version":3,"file":"ExternalCTI.d.ts","sourceRoot":"","sources":["../../../src/components/CallControlPanel/ExternalCTI.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA6B,iBAAiB,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAG3F,OAAO,EAAoB,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAIzE,MAAM,WAAW,gBAAgB;IAC/B,4BAA4B;IAC5B,OAAO,EAAE,MAAM,CAAC;IAChB,gDAAgD;IAChD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oCAAoC;IACpC,IAAI,CAAC,EAAE;QACL,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,kCAAkC;IAClC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAgCD,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CAyBnE,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/components/CallControlPanel/ExternalCTI.js CHANGED Viewed

@@ -2,17 +2,17 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import { defaultThemeProp } from '@pega/cosmos-react-core';
-import FloatingPanel, { StyledFloatingPanel } from './FloatingPanel';
-const StyledExternalCTIPanel = styled(StyledFloatingPanel)(({ theme }) => {
+import FloatingPanel from './FloatingPanel';
+const StyledExternalCTIPanel = styled(FloatingPanel)(({ theme: { components: { card: { 'border-radius': borderRadius } } } }) => {
     return css `
-    width: auto;
-    iframe {
-      border: transparent;
-      display: block;
-      border-end-start-radius: ${theme.components.card['border-radius']};
-      border-end-end-radius: ${theme.components.card['border-radius']};
-    }
-  `;
+      width: auto;
+      iframe {
+        border: transparent;
+        display: block;
+        border-end-start-radius: ${borderRadius};
+        border-end-end-radius: ${borderRadius};
+      }
+    `;
 });
 StyledExternalCTIPanel.defaultProps = defaultThemeProp;
 const StyledCTIContainer = styled.div `
@@ -22,7 +22,7 @@ const StyledCTIContainer = styled.div `
 `;
 StyledCTIContainer.defaultProps = defaultThemeProp;
 const ExternalCTI = forwardRef(({ heading, draggable = false, size }, ref) => {
-    return (_jsx(FloatingPanel, { as: StyledExternalCTIPanel, heading: heading, draggable: draggable, content: _jsx(StyledCTIContainer, { style: size
+    return (_jsx(StyledExternalCTIPanel, { heading: heading, draggable: draggable, content: _jsx(StyledCTIContainer, { style: size
                 ? {
                     '--cti-container-width': `${size.width}px`,
                     '--cti-container-height': `${size.height}px`

package/lib/components/CallControlPanel/ExternalCTI.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ExternalCTI.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/ExternalCTI.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAiB,UAAU,EAA2C,MAAM,OAAO,CAAC;AAC3F,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAgB,MAAM,yBAAyB,CAAC;AAEzE,OAAO,aAAa,~~EAAE,EAAE,mBAAmB,EAAE,~~MAAM,iBAAiB,CAAC;~~AAgBrE~~,MAAM,sBAAsB,GAAG,MAAM,CAAC,~~mBAAmB~~,CAAC,~~CAAC~~,CAAC,~~EAAE~~,KAAK,EAAE,~~EAAE~~,EAAE~~;IACvE~~,~~OAAO~~,~~GAAG~~,~~CAAA;;;;;iCAKqB~~,~~KAAK~~,~~CAAC~~,~~UAAU~~,~~CAAC~~,~~IAAI~~,~~CAAC~~,~~eAAe~~,~~CAAC;+BACxC~~,~~KAAK~~,~~CAAC~~,~~UAAU~~,~~CAAC~~,~~IAAI~~,~~CAAC~~,~~eAAe,CAAC~~;;~~GAElE~~,CAAC;AACJ,CAAC,~~CAAC~~,CAAC;~~AAEH~~,sBAAsB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEvD,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAIpC,CAAC;AAEF,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,WAAW,GAAuD,UAAU,CAChF,CACE,EAAE,OAAO,EAAE,SAAS,GAAG,KAAK,EAAE,IAAI,EAAqC,EACvE,GAA4B,EAC5B,EAAE;IACF,OAAO,CACL,KAAC,~~aAAa,IACZ,EAAE,EAAE,~~sBAAsB,~~EAC1B~~,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,OAAO,EACL,KAAC,kBAAkB,IACjB,KAAK,EACH,IAAI;gBACF,CAAC,CAAE;oBACC,uBAAuB,EAAE,GAAG,IAAI,CAAC,KAAK,IAAI;oBAC1C,wBAAwB,EAAE,GAAG,IAAI,CAAC,MAAM,IAAI;iBAC3B;gBACrB,CAAC,CAAC,SAAS,EAEf,GAAG,EAAE,GAAG,GACR,GAEJ,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { CSSProperties, forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp, ForwardProps } from '@pega/cosmos-react-core';\n\nimport FloatingPanel, ~~{ StyledFloatingPanel }~~ from './FloatingPanel';\n\nexport interface ExternalCTIProps {\n /** The heading rendered. /\n heading: string;\n /* If true, the component will be draggable. /\n draggable?: boolean;\n /* Container element size in px. /\n size?: {\n width: number;\n height: number;\n };\n /* Reference to the container. */\n ref?: Ref<HTMLDivElement>;\n}\n\nconst StyledExternalCTIPanel = styled(~~StyledFloatingPanel~~)(({ theme }) => {\n return css`\n width: auto;\n iframe {\n border: transparent;\n display: block;\n border-end-start-radius: ${~~theme.components.card['border-radius']~~};\n border-end-end-radius: ${~~theme.components.card['border-radius']~~};\n }\n `;\n});\n\nStyledExternalCTIPanel.defaultProps = defaultThemeProp;\n\nconst StyledCTIContainer = styled.div`\n width: var(--cti-container-width, auto);\n height: var(--cti-container-height, auto);\n overflow-y: auto;\n`;\n\nStyledCTIContainer.defaultProps = defaultThemeProp;\n\nconst ExternalCTI: FunctionComponent<ExternalCTIProps & ForwardProps> = forwardRef(\n (\n { heading, draggable = false, size }: PropsWithoutRef<ExternalCTIProps>,\n ref: ExternalCTIProps['ref']\n ) => {\n return (\n <~~FloatingPanel\n as={~~StyledExternalCTIPanel}\n heading={heading}\n draggable={draggable}\n content={\n <StyledCTIContainer\n style={\n size\n ? ({\n '--cti-container-width': `${size.width}px`,\n '--cti-container-height': `${size.height}px`\n } as CSSProperties)\n : undefined\n }\n ref={ref}\n />\n }\n />\n );\n }\n);\n\nexport default ExternalCTI;\n"]}
1	+ {"version":3,"file":"ExternalCTI.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/ExternalCTI.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAiB,UAAU,EAA2C,MAAM,OAAO,CAAC;AAC3F,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAgB,MAAM,yBAAyB,CAAC;AAEzE,OAAO,aAAa,MAAM,iBAAiB,CAAC;AAgB5C,MAAM,sBAAsB,GAAG,MAAM,CAAC,aAAa,CAAC,CAClD,CAAC,EACC,KAAK,EAAE,EACL,UAAU,EAAE,EACV,IAAI,EAAE,EAAE,eAAe,EAAE,YAAY,EAAE,EACxC,EACF,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;;;;;mCAKqB,YAAY;iCACd,YAAY;;KAExC,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,sBAAsB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEvD,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAIpC,CAAC;AAEF,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,WAAW,GAAuD,UAAU,CAChF,CACE,EAAE,OAAO,EAAE,SAAS,GAAG,KAAK,EAAE,IAAI,EAAqC,EACvE,GAA4B,EAC5B,EAAE;IACF,OAAO,CACL,KAAC,sBAAsB,IACrB,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,OAAO,EACL,KAAC,kBAAkB,IACjB,KAAK,EACH,IAAI;gBACF,CAAC,CAAE;oBACC,uBAAuB,EAAE,GAAG,IAAI,CAAC,KAAK,IAAI;oBAC1C,wBAAwB,EAAE,GAAG,IAAI,CAAC,MAAM,IAAI;iBAC3B;gBACrB,CAAC,CAAC,SAAS,EAEf,GAAG,EAAE,GAAG,GACR,GAEJ,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { CSSProperties, forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp, ForwardProps } from '@pega/cosmos-react-core';\n\nimport FloatingPanel from './FloatingPanel';\n\nexport interface ExternalCTIProps {\n /** The heading rendered. /\n heading: string;\n /* If true, the component will be draggable. /\n draggable?: boolean;\n /* Container element size in px. /\n size?: {\n width: number;\n height: number;\n };\n /* Reference to the container. */\n ref?: Ref<HTMLDivElement>;\n}\n\nconst StyledExternalCTIPanel = styled(FloatingPanel)(\n ({\n theme: {\n components: {\n card: { 'border-radius': borderRadius }\n }\n }\n }) => {\n return css`\n width: auto;\n iframe {\n border: transparent;\n display: block;\n border-end-start-radius: ${borderRadius};\n border-end-end-radius: ${borderRadius};\n }\n `;\n }\n);\n\nStyledExternalCTIPanel.defaultProps = defaultThemeProp;\n\nconst StyledCTIContainer = styled.div`\n width: var(--cti-container-width, auto);\n height: var(--cti-container-height, auto);\n overflow-y: auto;\n`;\n\nStyledCTIContainer.defaultProps = defaultThemeProp;\n\nconst ExternalCTI: FunctionComponent<ExternalCTIProps & ForwardProps> = forwardRef(\n (\n { heading, draggable = false, size }: PropsWithoutRef<ExternalCTIProps>,\n ref: ExternalCTIProps['ref']\n ) => {\n return (\n <StyledExternalCTIPanel\n heading={heading}\n draggable={draggable}\n content={\n <StyledCTIContainer\n style={\n size\n ? ({\n '--cti-container-width': `${size.width}px`,\n '--cti-container-height': `${size.height}px`\n } as CSSProperties)\n : undefined\n }\n ref={ref}\n />\n }\n />\n );\n }\n);\n\nexport default ExternalCTI;\n"]}

package/lib/components/CallControlPanel/FloatingPanel.js CHANGED Viewed

@@ -46,7 +46,7 @@ const FloatingPanel = forwardRef(({ heading, actions = [], draggable, content: c
     const [collapsed, setCollapsed] = useState(false);
     const containerRef = useConsolidatedRef(ref);
     const dragRef = useRef(null);
-    useDraggable(containerRef, dragRef, !collapsed);
+    useDraggable(containerRef, dragRef, !collapsed && draggable);
     const [headerHeight, setHeaderHeight] = useState(0);
     useLayoutEffect(() => {
         if (containerRef.current) {

package/lib/components/CallControlPanel/FloatingPanel.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FloatingPanel.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/FloatingPanel.tsx"],"names":[],"mappings":";;AAAA,OAAO,EAEL,UAAU,EAMV,eAAe,EACf,MAAM,EACN,QAAQ,EACT,MAAM,OAAO,CAAC;AACf,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,UAAU,EACV,MAAM,EACN,OAAO,EACP,IAAI,EACJ,YAAY,EACZ,IAAI,EACJ,IAAI,EAEJ,kBAAkB,EAClB,YAAY,EAGZ,gBAAgB,EAChB,YAAY,EACZ,UAAU,EACX,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,aAAa,MAAM,mEAAmE,CAAC;AACnG,OAAO,KAAK,cAAc,MAAM,oEAAoE,CAAC;AACrG,OAAO,EAAE,gBAAgB,EAAE,MAAM,wDAAwD,CAAC;AAE1F,YAAY,CAAC,aAAa,EAAE,cAAc,CAAC,CAAC;AAE5C,MAAM,6BAA6B,GAAG,CAAC,YAAuC,EAAQ,EAAE;IACtF,IAAI,YAAY,IAAI,YAAY,CAAC,OAAO;QACtC,YAAY,CAAC,OAAO,CAAC,KAAK,CAAC,SAAS,GAAG,qBAAqB,CAAC;AACjE,CAAC,CAAC;AA4BF,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,UAAU,CAAC,CAGlD,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,EAAE,EAAE;IACzC,OAAO,GAAG,CAAA;;;eAGG,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,KAAK;;iCAET,KAAK,CAAC,IAAI,CAAC,OAAO;uBAC5B,KAAK,CAAC,IAAI,CAAC,OAAO;kBACvB,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI;MAClC,WAAW;QACb,GAAG,CAAA;;qDAE8C,KAAK,CAAC,IAAI,CAAC,OAAO;;KAElE;MACC,gBAAgB;QACd,CAAC,WAAW;QACd,WAAW;QACX,GAAG,CAAA;;OAEF;;MAED,gBAAgB,IAAI,YAAY;uCACC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK;UACvD,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI;mBACvB,WAAW,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,WAAW;;GAE7D,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEpD,MAAM,aAAa,GAAyD,UAAU,CACpF,CACE,EACE,OAAO,EACP,OAAO,GAAG,EAAE,EACZ,SAAS,EACT,OAAO,EAAE,WAAW,EACpB,GAAG,SAAS,EACwB,EACtC,GAA8B,EAC9B,EAAE;IACF,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClD,MAAM,YAAY,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IAC7C,MAAM,OAAO,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC7C,YAAY,CAAC,YAAY,EAAE,OAAO,EAAE,CAAC,SAAS,CAAC,CAAC;~~IAEhD~~,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAEpD,eAAe,CAAC,GAAG,EAAE;QACnB,IAAI,YAAY,CAAC,OAAO,EAAE;YACxB,eAAe,CAAC,YAAY,CAAC,OAAO,CAAC,aAAa,CAAC,QAAQ,CAAC,EAAE,YAAY,IAAI,CAAC,CAAC,CAAC;SAClF;IACH,CAAC,EAAE,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC;IAE3B,OAAO,CACL,MAAC,IAAI,OACC,SAAS,EACb,EAAE,EAAE,mBAAmB,EACvB,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,EAClC,GAAG,EAAE,YAAY,EACjB,WAAW,EAAE,SAAS,EACtB,WAAW,EAAE,SAAS,EACtB,KAAK,EAAE,EAAE,gBAAgB,EAAE,GAAG,YAAY,IAAI,EAAmB,aAEjE,KAAC,UAAU,IACT,GAAG,EAAE,OAAO,EACZ,OAAO,EACL,8BACG,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,UAAU,EAAE,EAAE,EAAE,CAAC,CAClD,eAAC,MAAM,OAAK,UAAU,EAAE,IAAI,QAAC,OAAO,EAAC,QAAQ,EAAC,GAAG,EAAE,EAAE,EAAE,KAAK,EAAE,IAAI;4BAChE,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,GAAI,CACb,CACV,CAAC,EACF,KAAC,MAAM,IACL,IAAI,QACJ,OAAO,EAAC,QAAQ,EAEhB,KAAK,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,qBAAqB,CAAC,EACjE,OAAO,EAAE,GAAG,EAAE;gCACZ,6BAA6B,CAAC,YAAY,CAAC,CAAC;gCAC5C,YAAY,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC;4BAChC,CAAC,YAED,KAAC,IAAI,IAAC,IAAI,EAAC,YAAY,GAAG,IAPtB,iBAAiB,CAQd,IACR,YAGL,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EAAE,aACnD,KAAC,IAAI,IAAC,IAAI,EAAC,aAAa,GAAG,EAC3B,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,OAAO,GAAQ,IAC9B,GACI,EACZ,WAAW,IACP,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import {\n CSSProperties,\n forwardRef,\n FunctionComponent,\n PropsWithoutRef,\n ReactNode,\n Ref,\n RefObject,\n useLayoutEffect,\n useRef,\n useState\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n CardHeader,\n Button,\n useI18n,\n Icon,\n registerIcon,\n Flex,\n Text,\n ForwardProps,\n useConsolidatedRef,\n useDraggable,\n Action,\n IconNames,\n defaultThemeProp,\n StyledButton,\n StyledCard\n} from '@pega/cosmos-react-core';\nimport * as caretDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-down.icon';\nimport * as phoneSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/phone-solid.icon';\nimport { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';\n\nregisterIcon(caretDownIcon, phoneSolidIcon);\n\nconst resetPopoverToDefaultPosition = (containerRef: RefObject<HTMLDivElement>): void => {\n if (containerRef && containerRef.current)\n containerRef.current.style.transform = 'translate(0px, 0px)';\n};\n\nexport interface FloatingPanelActionProps extends ForwardProps {\n /** A string to uniquely identify this Action within the onClick handler. /\n id: Action['id'];\n /* The text content of the Action. /\n text: Action['text'];\n /* Name of the icon from the cosmos set. /\n icon: IconNames;\n /* Determines if the Action will be disabled. /\n disabled?: Action['disabled'];\n /* Called when the Action is clicked. /\n onClick: NonNullable<Action['onClick']>;\n}\n\nexport interface FloatingPanelProps {\n /* The heading rendered. /\n heading: string;\n /* Content of the panel /\n content: ReactNode;\n /* Action button to be rendered in header /\n actions?: FloatingPanelActionProps[];\n /* If true, the component will be draggable /\n draggable?: boolean;\n /* Reference to the root component. /\n ref?: Ref<HTMLDivElement>;\n}\n\nexport const StyledFloatingPanel = styled(StyledCard)<{\n isCollapsed: boolean;\n isDraggable?: boolean;\n}>(({ theme, isCollapsed, isDraggable }) => {\n return css`\n max-height: calc(100% - 2rem);\n position: fixed;\n z-index: ${theme.base['z-index'].modal};\n width: 25rem;\n inset-inline-end: calc(2 ${theme.base.spacing});\n bottom: calc(2 * ${theme.base.spacing});\n box-shadow: ${theme.base.shadow.high};\n ${isCollapsed &&\n css`\n transform: translateY(\n calc(100% - var(--headerHeight) + calc(2 * ${theme.base.spacing}))\n ) !important;\n `}\n ${StyledCardHeader} {\n ${!isCollapsed &&\n isDraggable &&\n css`\n cursor: all-scroll;\n `}\n }\n ${StyledCardHeader} ${StyledButton}:last-child {\n transition: transform calc(2 * ${theme.base.animation.speed})\n ${theme.base.animation.timing.ease};\n transform: ${isCollapsed ? 'rotate(-180deg)' : 'rotate(0)'};\n }\n `;\n});\n\nStyledFloatingPanel.defaultProps = defaultThemeProp;\n\nconst FloatingPanel: FunctionComponent<FloatingPanelProps & ForwardProps> = forwardRef(\n (\n {\n heading,\n actions = [],\n draggable,\n content: cardContent,\n ...restProps\n }: PropsWithoutRef<FloatingPanelProps>,\n ref: FloatingPanelProps['ref']\n ) => {\n const t = useI18n();\n const [collapsed, setCollapsed] = useState(false);\n const containerRef = useConsolidatedRef(ref);\n const dragRef = useRef<HTMLDivElement>(null);\n useDraggable(containerRef, dragRef, !collapsed);\n\n const [headerHeight, setHeaderHeight] = useState(0);\n\n useLayoutEffect(() => {\n if (containerRef.current) {\n setHeaderHeight(containerRef.current.querySelector('header')?.offsetHeight \|\| 0);\n }\n }, [containerRef.current]);\n\n return (\n <Flex\n {...restProps}\n as={StyledFloatingPanel}\n container={{ direction: 'column' }}\n ref={containerRef}\n isCollapsed={collapsed}\n isDraggable={draggable}\n style={{ '--headerHeight': `${headerHeight}px` } as CSSProperties}\n >\n <CardHeader\n ref={dragRef}\n actions={\n <>\n {actions.map(({ id, icon, text, ...restAction }) => (\n <Button {...restAction} icon variant='simple' key={id} label={text}>\n <Icon name={icon} />\n </Button>\n ))}\n <Button\n icon\n variant='simple'\n key='expand-collapse'\n label={t(collapsed ? 'call_panel_expand' : 'call_panel_collapse')}\n onClick={() => {\n resetPopoverToDefaultPosition(containerRef);\n setCollapsed(state => !state);\n }}\n >\n <Icon name='caret-down' />\n </Button>\n </>\n }\n >\n <Flex container={{ alignItems: 'center', itemGap: 1 }}>\n <Icon name='phone-solid' />\n <Text variant='h3'>{heading}</Text>\n </Flex>\n </CardHeader>\n {cardContent}\n </Flex>\n );\n }\n);\n\nexport default FloatingPanel;\n"]}
1	+ {"version":3,"file":"FloatingPanel.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/FloatingPanel.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n CSSProperties,\n forwardRef,\n FunctionComponent,\n PropsWithoutRef,\n ReactNode,\n Ref,\n RefObject,\n useLayoutEffect,\n useRef,\n useState\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n CardHeader,\n Button,\n useI18n,\n Icon,\n registerIcon,\n Flex,\n Text,\n ForwardProps,\n useConsolidatedRef,\n useDraggable,\n Action,\n IconNames,\n defaultThemeProp,\n StyledButton,\n StyledCard\n} from '@pega/cosmos-react-core';\nimport * as caretDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-down.icon';\nimport * as phoneSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/phone-solid.icon';\nimport { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';\n\nregisterIcon(caretDownIcon, phoneSolidIcon);\n\nconst resetPopoverToDefaultPosition = (containerRef: RefObject<HTMLDivElement>): void => {\n if (containerRef && containerRef.current)\n containerRef.current.style.transform = 'translate(0px, 0px)';\n};\n\nexport interface FloatingPanelActionProps extends ForwardProps {\n /** A string to uniquely identify this Action within the onClick handler. /\n id: Action['id'];\n /* The text content of the Action. /\n text: Action['text'];\n /* Name of the icon from the cosmos set. /\n icon: IconNames;\n /* Determines if the Action will be disabled. /\n disabled?: Action['disabled'];\n /* Called when the Action is clicked. /\n onClick: NonNullable<Action['onClick']>;\n}\n\nexport interface FloatingPanelProps {\n /* The heading rendered. /\n heading: string;\n /* Content of the panel /\n content: ReactNode;\n /* Action button to be rendered in header /\n actions?: FloatingPanelActionProps[];\n /* If true, the component will be draggable /\n draggable?: boolean;\n /* Reference to the root component. /\n ref?: Ref<HTMLDivElement>;\n}\n\nexport const StyledFloatingPanel = styled(StyledCard)<{\n isCollapsed: boolean;\n isDraggable?: boolean;\n}>(({ theme, isCollapsed, isDraggable }) => {\n return css`\n max-height: calc(100% - 2rem);\n position: fixed;\n z-index: ${theme.base['z-index'].modal};\n width: 25rem;\n inset-inline-end: calc(2 ${theme.base.spacing});\n bottom: calc(2 * ${theme.base.spacing});\n box-shadow: ${theme.base.shadow.high};\n ${isCollapsed &&\n css`\n transform: translateY(\n calc(100% - var(--headerHeight) + calc(2 * ${theme.base.spacing}))\n ) !important;\n `}\n ${StyledCardHeader} {\n ${!isCollapsed &&\n isDraggable &&\n css`\n cursor: all-scroll;\n `}\n }\n ${StyledCardHeader} ${StyledButton}:last-child {\n transition: transform calc(2 * ${theme.base.animation.speed})\n ${theme.base.animation.timing.ease};\n transform: ${isCollapsed ? 'rotate(-180deg)' : 'rotate(0)'};\n }\n `;\n});\n\nStyledFloatingPanel.defaultProps = defaultThemeProp;\n\nconst FloatingPanel: FunctionComponent<FloatingPanelProps & ForwardProps> = forwardRef(\n (\n {\n heading,\n actions = [],\n draggable,\n content: cardContent,\n ...restProps\n }: PropsWithoutRef<FloatingPanelProps>,\n ref: FloatingPanelProps['ref']\n ) => {\n const t = useI18n();\n const [collapsed, setCollapsed] = useState(false);\n const containerRef = useConsolidatedRef(ref);\n const dragRef = useRef<HTMLDivElement>(null);\n useDraggable(containerRef, dragRef, !collapsed && draggable);\n\n const [headerHeight, setHeaderHeight] = useState(0);\n\n useLayoutEffect(() => {\n if (containerRef.current) {\n setHeaderHeight(containerRef.current.querySelector('header')?.offsetHeight \|\| 0);\n }\n }, [containerRef.current]);\n\n return (\n <Flex\n {...restProps}\n as={StyledFloatingPanel}\n container={{ direction: 'column' }}\n ref={containerRef}\n isCollapsed={collapsed}\n isDraggable={draggable}\n style={{ '--headerHeight': `${headerHeight}px` } as CSSProperties}\n >\n <CardHeader\n ref={dragRef}\n actions={\n <>\n {actions.map(({ id, icon, text, ...restAction }) => (\n <Button {...restAction} icon variant='simple' key={id} label={text}>\n <Icon name={icon} />\n </Button>\n ))}\n <Button\n icon\n variant='simple'\n key='expand-collapse'\n label={t(collapsed ? 'call_panel_expand' : 'call_panel_collapse')}\n onClick={() => {\n resetPopoverToDefaultPosition(containerRef);\n setCollapsed(state => !state);\n }}\n >\n <Icon name='caret-down' />\n </Button>\n </>\n }\n >\n <Flex container={{ alignItems: 'center', itemGap: 1 }}>\n <Icon name='phone-solid' />\n <Text variant='h3'>{heading}</Text>\n </Flex>\n </CardHeader>\n {cardContent}\n </Flex>\n );\n }\n);\n\nexport default FloatingPanel;\n"]}

package/lib/components/TaskManager/Dialogue.d.ts ADDED Viewed

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

package/lib/components/TaskManager/Dialogue.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"Dialogue.d.ts","sourceRoot":"","sources":["../../../src/components/TaskManager/Dialogue.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EAKlB,MAAM,OAAO,CAAC;AAEf,OAAO,EAAQ,YAAY,EAAgC,MAAM,yBAAyB,CAAC;AAE3F,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AASpD,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,GAAG,YAAY,CA2E7D,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/lib/components/TaskManager/Dialogue.js ADDED Viewed

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useMemo, useImperativeHandle } from 'react';
+import { Flex, useConsolidatedRef, useTheme } from '@pega/cosmos-react-core';
+import { StyledTaskManagerBanner, StyledAgentScriptIcon, StyledIconWrapSuccess, StyledIconWrapAlert, StyledSymbol } from './TaskManager.styles';
+const Dialogue = forwardRef(({ icon, verbatimStatus, content, handle, ...restProps }, ref) => {
+    const consolidatedRef = useConsolidatedRef(ref);
+    const { base: { animation: { timing } } } = useTheme();
+    useImperativeHandle(handle, () => ({
+        nudge: () => {
+            if (!consolidatedRef ||
+                !consolidatedRef.current ||
+                consolidatedRef.current.getAnimations?.().length > 0) {
+                return;
+            }
+            return consolidatedRef.current.animate?.([{ transform: 'translateX(-0.3rem)' }, { transform: 'translateX(0.3rem)' }], {
+                duration: 50,
+                iterations: 10,
+                playbackRate: 1,
+                direction: 'alternate',
+                easing: timing.ease
+            });
+        }
+    }));
+    const iconWithStatus = useMemo(() => {
+        if (verbatimStatus === 'spoken') {
+            return (_jsxs(StyledIconWrapSuccess, { verbatimStatus: verbatimStatus, children: [_jsx(StyledAgentScriptIcon, { name: icon }), _jsx(StyledSymbol, { name: 'check', verbatimStatus: verbatimStatus })] }));
+        }
+        if (verbatimStatus === 'pending') {
+            return (_jsxs(StyledIconWrapAlert, { verbatimStatus: verbatimStatus, children: [_jsx(StyledAgentScriptIcon, { name: icon }), _jsx(StyledSymbol, { as: 'span', ref: consolidatedRef, verbatimStatus: verbatimStatus, children: "!" })] }));
+        }
+        return (_jsx(StyledIconWrapSuccess, { children: _jsx(StyledAgentScriptIcon, { name: icon }) }));
+    }, [icon, content, verbatimStatus]);
+    return (_jsxs(Flex, { ...restProps, as: StyledTaskManagerBanner, container: {
+            alignItems: 'center'
+        }, "aria-live": 'assertive', children: [_jsx(Flex, { children: iconWithStatus }), _jsx(Flex, { children: content })] }));
+});
+export default Dialogue;
+//# sourceMappingURL=Dialogue.js.map

package/lib/components/TaskManager/Dialogue.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"Dialogue.js","sourceRoot":"","sources":["../../../src/components/TaskManager/Dialogue.tsx"],"names":[],"mappings":";AAAA,OAAO,EAEL,UAAU,EAEV,OAAO,EACP,mBAAmB,EACpB,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,IAAI,EAAgB,kBAAkB,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAG3F,OAAO,EACL,uBAAuB,EACvB,qBAAqB,EACrB,qBAAqB,EACrB,mBAAmB,EACnB,YAAY,EACb,MAAM,sBAAsB,CAAC;AAE9B,MAAM,QAAQ,GAAoD,UAAU,CAC1E,CACE,EAAE,IAAI,EAAE,cAAc,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,SAAS,EAAkC,EACvF,GAAyB,EACzB,EAAE;IACF,MAAM,eAAe,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IAChD,MAAM,EACJ,IAAI,EAAE,EACJ,SAAS,EAAE,EAAE,MAAM,EAAE,EACtB,EACF,GAAG,QAAQ,EAAE,CAAC;IAEf,mBAAmB,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC,CAAC;QACjC,KAAK,EAAE,GAAG,EAAE;YACV,IACE,CAAC,eAAe;gBAChB,CAAC,eAAe,CAAC,OAAO;gBACxB,eAAe,CAAC,OAAO,CAAC,aAAa,EAAE,EAAE,CAAC,MAAM,GAAG,CAAC,EACpD;gBACA,OAAO;aACR;YAED,OAAO,eAAe,CAAC,OAAO,CAAC,OAAO,EAAE,CACtC,CAAC,EAAE,SAAS,EAAE,qBAAqB,EAAE,EAAE,EAAE,SAAS,EAAE,oBAAoB,EAAE,CAAC,EAC3E;gBACE,QAAQ,EAAE,EAAE;gBACZ,UAAU,EAAE,EAAE;gBACd,YAAY,EAAE,CAAC;gBACf,SAAS,EAAE,WAAW;gBACtB,MAAM,EAAE,MAAM,CAAC,IAAI;aACpB,CACF,CAAC;QACJ,CAAC;KACF,CAAC,CAAC,CAAC;IAEJ,MAAM,cAAc,GAAG,OAAO,CAAC,GAAG,EAAE;QAClC,IAAI,cAAc,KAAK,QAAQ,EAAE;YAC/B,OAAO,CACL,MAAC,qBAAqB,IAAC,cAAc,EAAE,cAAc,aACnD,KAAC,qBAAqB,IAAC,IAAI,EAAE,IAAI,GAAI,EACrC,KAAC,YAAY,IAAC,IAAI,EAAC,OAAO,EAAC,cAAc,EAAE,cAAc,GAAI,IACvC,CACzB,CAAC;SACH;QACD,IAAI,cAAc,KAAK,SAAS,EAAE;YAChC,OAAO,CACL,MAAC,mBAAmB,IAAC,cAAc,EAAE,cAAc,aACjD,KAAC,qBAAqB,IAAC,IAAI,EAAE,IAAI,GAAI,EACrC,KAAC,YAAY,IAAC,EAAE,EAAC,MAAM,EAAC,GAAG,EAAE,eAAe,EAAE,cAAc,EAAE,cAAc,kBAE7D,IACK,CACvB,CAAC;SACH;QACD,OAAO,CACL,KAAC,qBAAqB,cACpB,KAAC,qBAAqB,IAAC,IAAI,EAAE,IAAI,GAAI,GACf,CACzB,CAAC;IACJ,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,cAAc,CAAC,CAAC,CAAC;IAEpC,OAAO,CACL,MAAC,IAAI,OACC,SAAS,EACb,EAAE,EAAE,uBAAuB,EAC3B,SAAS,EAAE;YACT,UAAU,EAAE,QAAQ;SACrB,eACS,WAAW,aAErB,KAAC,IAAI,cAAE,cAAc,GAAQ,EAC7B,KAAC,IAAI,cAAE,OAAO,GAAQ,IACjB,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,QAAQ,CAAC","sourcesContent":["import {\n FunctionComponent,\n forwardRef,\n PropsWithoutRef,\n useMemo,\n useImperativeHandle\n} from 'react';\n\nimport { Flex, ForwardProps, useConsolidatedRef, useTheme } from '@pega/cosmos-react-core';\n\nimport { DialogueProps } from './TaskManager.types';\nimport {\n StyledTaskManagerBanner,\n StyledAgentScriptIcon,\n StyledIconWrapSuccess,\n StyledIconWrapAlert,\n StyledSymbol\n} from './TaskManager.styles';\n\nconst Dialogue: FunctionComponent<DialogueProps & ForwardProps> = forwardRef(\n (\n { icon, verbatimStatus, content, handle, ...restProps }: PropsWithoutRef<DialogueProps>,\n ref: DialogueProps['ref']\n ) => {\n const consolidatedRef = useConsolidatedRef(ref);\n const {\n base: {\n animation: { timing }\n }\n } = useTheme();\n\n useImperativeHandle(handle, () => ({\n nudge: () => {\n if (\n !consolidatedRef ||\n !consolidatedRef.current ||\n consolidatedRef.current.getAnimations?.().length > 0\n ) {\n return;\n }\n\n return consolidatedRef.current.animate?.(\n [{ transform: 'translateX(-0.3rem)' }, { transform: 'translateX(0.3rem)' }],\n {\n duration: 50,\n iterations: 10,\n playbackRate: 1,\n direction: 'alternate',\n easing: timing.ease\n }\n );\n }\n }));\n\n const iconWithStatus = useMemo(() => {\n if (verbatimStatus === 'spoken') {\n return (\n <StyledIconWrapSuccess verbatimStatus={verbatimStatus}>\n <StyledAgentScriptIcon name={icon} />\n <StyledSymbol name='check' verbatimStatus={verbatimStatus} />\n </StyledIconWrapSuccess>\n );\n }\n if (verbatimStatus === 'pending') {\n return (\n <StyledIconWrapAlert verbatimStatus={verbatimStatus}>\n <StyledAgentScriptIcon name={icon} />\n <StyledSymbol as='span' ref={consolidatedRef} verbatimStatus={verbatimStatus}>\n !\n </StyledSymbol>\n </StyledIconWrapAlert>\n );\n }\n return (\n <StyledIconWrapSuccess>\n <StyledAgentScriptIcon name={icon} />\n </StyledIconWrapSuccess>\n );\n }, [icon, content, verbatimStatus]);\n\n return (\n <Flex\n {...restProps}\n as={StyledTaskManagerBanner}\n container={{\n alignItems: 'center'\n }}\n aria-live='assertive'\n >\n <Flex>{iconWithStatus}</Flex>\n <Flex>{content}</Flex>\n </Flex>\n );\n }\n);\n\nexport default Dialogue;\n"]}

package/lib/components/TaskManager/TaskManager.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TaskManager.d.ts","sourceRoot":"","sources":["../../../src/components/TaskManager/TaskManager.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAA4D,MAAM,OAAO,CAAC;AAGpG,OAAO,EAeL,YAAY,EACb,MAAM,yBAAyB,CAAC;~~AAajC~~,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;~~AAOvD~~,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,~~CAkMnE~~,CAAC;AAEF,eAAe,WAAW,CAAC"}
1	+ {"version":3,"file":"TaskManager.d.ts","sourceRoot":"","sources":["../../../src/components/TaskManager/TaskManager.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAA4D,MAAM,OAAO,CAAC;AAGpG,OAAO,EAeL,YAAY,EACb,MAAM,yBAAyB,CAAC;AAYjC,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAQvD,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CAgMnE,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/components/TaskManager/TaskManager.js CHANGED Viewed

@@ -1,18 +1,19 @@
 import { createElement as _createElement } from "react";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useRef, useEffect, useState } from 'react';
 import { remToPx, stripUnit } from 'polished';
 import { Flex, Icon, registerIcon, Text, Status, useI18n, useConsolidatedRef, useElement, Button, Grid, SummaryItem, EmptyState, useTheme, tryCatch } from '@pega/cosmos-react-core';
 import * as flagFinishIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/flag-finish.icon';
 import * as plusIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/plus.icon';
-import { StyledTaskManager, StyledTaskManagerBanner, StyledTaskSummaryItem, StyledPopover, StyledTaskMain } from './TaskManager.styles';
+import { StyledTaskManager, StyledTaskSummaryItem, StyledPopover, StyledTaskMain } from './TaskManager.styles';
 import TaskManagerContext from './TaskManager.context';
 import TaskManagerTabs from './TaskManagerTabs';
 import TaskView from './TaskView';
 import Picker from './Picker/Picker';
+import Dialogue from './Dialogue';
 registerIcon(plusIcon, flagFinishIcon);
 const TaskManager = forwardRef((props, ref) => {
-    const { tasks = [], emptyText, onTaskLaunch, onTaskDismiss, addTask, wrapUp, main, banner, ...restProps } = props;
+    const { tasks = [], emptyText, onTaskLaunch, onTaskDismiss, addTask, wrapUp, main, banner, handle, ...restProps } = props;
     const t = useI18n();
     const TaskManagerTabsRef = useRef(null);
     const consolidatedRef = useConsolidatedRef(ref);
@@ -33,9 +34,7 @@ const TaskManager = forwardRef((props, ref) => {
             wrapUp,
             tasks,
             onTaskLaunch
-        }, children: _jsxs("div", { children: [banner && (_jsxs(Flex, { as: StyledTaskManagerBanner, container: {
-                        alignItems: 'center'
-                    }, "aria-live": 'polite', children: [_jsx(Icon, { name: banner.icon }), _jsx(Text, { variant: 'h4', children: banner.content })] })), _jsx(StyledTaskManager, { ...restProps, ref: consolidatedRef, hasDrawer: hasActiveTask, children: _jsxs(TaskView, { header: _jsx(Text, { variant: 'h2', children: t('task_manager_tasks') }), actions: _jsxs(Flex, { container: {
+        }, children: _jsxs("div", { children: [banner && (_jsx(Dialogue, { icon: banner.icon, content: banner.content, verbatimStatus: banner.verbatimStatus, ref: consolidatedRef, handle: handle })), _jsx(StyledTaskManager, { ...restProps, ref: consolidatedRef, hasDrawer: hasActiveTask, children: _jsxs(TaskView, { header: _jsx(Text, { variant: 'h2', children: t('task_manager_tasks') }), actions: _jsxs(Flex, { container: {
                                 itemGap: 1
                             }, children: [wrapUp && (_jsx(Button, { variant: 'secondary', disabled: wrapUp.disable, onClick: () => wrapUp?.onClick(), children: _jsxs(Flex, { container: {
                                             itemGap: 1,

package/lib/components/TaskManager/TaskManager.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TaskManager.js","sourceRoot":"","sources":["../../../src/components/TaskManager/TaskManager.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, PropsWithoutRef, forwardRef, useRef, useEffect, useState } from 'react';\nimport { remToPx, stripUnit } from 'polished';\n\nimport {\n Flex,\n Icon,\n registerIcon,\n Text,\n Status,\n useI18n,\n useConsolidatedRef,\n useElement,\n Button,\n Grid,\n SummaryItem,\n EmptyState,\n useTheme,\n tryCatch,\n ForwardProps\n} from '@pega/cosmos-react-core';\nimport * as flagFinishIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/flag-finish.icon';\nimport * as plusIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/plus.icon';\n\nimport {\n StyledTaskManager,\n StyledTaskManagerBanner,\n StyledTaskSummaryItem,\n StyledPopover,\n StyledTaskMain\n} from './TaskManager.styles';\nimport TaskManagerContext from './TaskManager.context';\nimport TaskManagerTabs from './TaskManagerTabs';\nimport { TaskManagerProps } from './TaskManager.types';\nimport TaskView from './TaskView';\nimport Picker from './Picker/Picker';\nimport { SelectedItemProps } from './Picker/Picker.types';\n\nregisterIcon(plusIcon, flagFinishIcon);\n\nconst TaskManager: FunctionComponent<TaskManagerProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<TaskManagerProps>, ref: TaskManagerProps['ref']) => {\n const {\n tasks = [],\n emptyText,\n onTaskLaunch,\n onTaskDismiss,\n addTask,\n wrapUp,\n main,\n banner,\n ...restProps\n } = props;\n const t = useI18n();\n const TaskManagerTabsRef = useRef<HTMLDivElement>(null);\n const consolidatedRef = useConsolidatedRef(ref);\n const hasActiveTask = tasks.filter(task => task.active).length > 0 \|\| !!wrapUp?.active;\n const [showPicker, setShowPicker] = useState(false);\n const [addTaskEl, setAddTaskEl] = useElement<HTMLButtonElement>(null);\n const theme = useTheme();\n\n useEffect(() => {\n if (TaskManagerTabsRef.current && consolidatedRef.current) {\n consolidatedRef.current.style.minHeight = `${TaskManagerTabsRef.current.scrollHeight}px`;\n } else if (consolidatedRef.current) {\n consolidatedRef.current.style.minHeight = '0';\n }\n }, [tasks, addTask]);\n\n return (\n <TaskManagerContext.Provider\n value={{\n addTask,\n wrapUp,\n tasks,\n onTaskLaunch\n }}\n >\n <div>\n {banner && (\n <Flex\n as={StyledTaskManagerBanner}\n container={{\n alignItems: 'center'\n }}\n aria-live='polite'\n >\n <Icon name={banner.icon} />\n <Text variant='h4'>{banner.content}</Text>\n </Flex>\n )}\n <StyledTaskManager {...restProps} ref={consolidatedRef} hasDrawer={hasActiveTask}>\n <TaskView\n header={<Text variant='h2'>{t('task_manager_tasks')}</Text>}\n actions={\n <Flex\n container={{\n itemGap: 1\n }}\n >\n {wrapUp && (\n <Button\n variant='secondary'\n disabled={wrapUp.disable}\n onClick={() => wrapUp?.onClick()}\n >\n <Flex\n container={{\n itemGap: 1,\n alignItems: 'center'\n }}\n >\n <Icon name='flag-finish' />\n <span>{t('task_manager_wrap_up')}</span>\n </Flex>\n </Button>\n )}\n {addTask && (\n <>\n <Button\n variant='primary'\n onClick={() => setShowPicker(cur => !cur)}\n ref={setAddTaskEl}\n >\n <Flex\n container={{\n gap: 1,\n alignItems: 'center'\n }}\n >\n <Icon name='plus' />\n <span>{t('task_manager_add_task')}</span>\n </Flex>\n </Button>\n <StyledPopover\n show={showPicker}\n target={addTaskEl}\n placement='bottom-end'\n modifiers={[\n {\n name: 'offset',\n options: {\n offset: [\n tryCatch(\n () => stripUnit(remToPx(theme.base.spacing)),\n () => 8\n ),\n tryCatch(\n () => stripUnit(remToPx(theme.base.spacing)),\n () => 8\n )\n ]\n }\n }\n ]}\n >\n <Picker\n scrollAt={10}\n emptyText={t('task_manager_search_results_empty_text')}\n items={addTask?.items}\n onAdd={(selectedItems: SelectedItemProps[]) => {\n if (addTask.onAdd) {\n addTask?.onAdd(selectedItems);\n }\n setShowPicker(false);\n }}\n onCancel={() => {\n setShowPicker(false);\n }}\n ref={addTask.ref}\n placeholder={t('search_tasks')}\n />\n </StyledPopover>\n </>\n )}\n </Flex>\n }\n >\n {hasActiveTask && <TaskManagerTabs ref={TaskManagerTabsRef} />}\n {hasActiveTask && <StyledTaskMain>{main}</StyledTaskMain>}\n {!hasActiveTask && (\n <Grid as='ul' container>\n {tasks.map(({ name, id, status, isResolved, meta, icon, ...restTaskProps }) => {\n return (\n <SummaryItem\n {...restTaskProps}\n key={id}\n as={StyledTaskSummaryItem}\n primary={<Text variant='h4'>{name}</Text>}\n secondary={\n <>\n {!status && meta && <Text variant='secondary'>{meta}</Text>}\n {status && <Status variant={status.variant}>{status.text}</Status>}\n </>\n }\n visual={<Icon name={icon} />}\n actions={\n <Flex container={{ gap: 1 }}>\n {!isResolved && (\n <Button\n variant='secondary'\n aria-label={t('continue_label_a11y', [name])}\n onClick={() => {\n onTaskLaunch?.(id);\n }}\n >\n {t('continue_label')}\n </Button>\n )}\n {isResolved && (\n <Button\n variant='secondary'\n aria-label={t('review_label_a11y', [name])}\n onClick={() => {\n onTaskLaunch?.(id);\n }}\n >\n {t('review_label')}\n </Button>\n )}\n </Flex>\n }\n />\n );\n })}\n {tasks.length === 0 && <EmptyState message={emptyText} />}\n </Grid>\n )}\n </TaskView>\n </StyledTaskManager>\n </div>\n </TaskManagerContext.Provider>\n );\n }\n);\n\nexport default TaskManager;\n"]}
1	+ {"version":3,"file":"TaskManager.js","sourceRoot":"","sources":["../../../src/components/TaskManager/TaskManager.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, PropsWithoutRef, forwardRef, useRef, useEffect, useState } from 'react';\nimport { remToPx, stripUnit } from 'polished';\n\nimport {\n Flex,\n Icon,\n registerIcon,\n Text,\n Status,\n useI18n,\n useConsolidatedRef,\n useElement,\n Button,\n Grid,\n SummaryItem,\n EmptyState,\n useTheme,\n tryCatch,\n ForwardProps\n} from '@pega/cosmos-react-core';\nimport * as flagFinishIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/flag-finish.icon';\nimport * as plusIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/plus.icon';\n\nimport {\n StyledTaskManager,\n StyledTaskSummaryItem,\n StyledPopover,\n StyledTaskMain\n} from './TaskManager.styles';\nimport TaskManagerContext from './TaskManager.context';\nimport TaskManagerTabs from './TaskManagerTabs';\nimport { TaskManagerProps } from './TaskManager.types';\nimport TaskView from './TaskView';\nimport Picker from './Picker/Picker';\nimport { SelectedItemProps } from './Picker/Picker.types';\nimport Dialogue from './Dialogue';\n\nregisterIcon(plusIcon, flagFinishIcon);\n\nconst TaskManager: FunctionComponent<TaskManagerProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<TaskManagerProps>, ref: TaskManagerProps['ref']) => {\n const {\n tasks = [],\n emptyText,\n onTaskLaunch,\n onTaskDismiss,\n addTask,\n wrapUp,\n main,\n banner,\n handle,\n ...restProps\n } = props;\n const t = useI18n();\n const TaskManagerTabsRef = useRef<HTMLDivElement>(null);\n const consolidatedRef = useConsolidatedRef(ref);\n const hasActiveTask = tasks.filter(task => task.active).length > 0 \|\| !!wrapUp?.active;\n const [showPicker, setShowPicker] = useState(false);\n const [addTaskEl, setAddTaskEl] = useElement<HTMLButtonElement>(null);\n const theme = useTheme();\n\n useEffect(() => {\n if (TaskManagerTabsRef.current && consolidatedRef.current) {\n consolidatedRef.current.style.minHeight = `${TaskManagerTabsRef.current.scrollHeight}px`;\n } else if (consolidatedRef.current) {\n consolidatedRef.current.style.minHeight = '0';\n }\n }, [tasks, addTask]);\n\n return (\n <TaskManagerContext.Provider\n value={{\n addTask,\n wrapUp,\n tasks,\n onTaskLaunch\n }}\n >\n <div>\n {banner && (\n <Dialogue\n icon={banner.icon}\n content={banner.content}\n verbatimStatus={banner.verbatimStatus}\n ref={consolidatedRef}\n handle={handle}\n />\n )}\n <StyledTaskManager {...restProps} ref={consolidatedRef} hasDrawer={hasActiveTask}>\n <TaskView\n header={<Text variant='h2'>{t('task_manager_tasks')}</Text>}\n actions={\n <Flex\n container={{\n itemGap: 1\n }}\n >\n {wrapUp && (\n <Button\n variant='secondary'\n disabled={wrapUp.disable}\n onClick={() => wrapUp?.onClick()}\n >\n <Flex\n container={{\n itemGap: 1,\n alignItems: 'center'\n }}\n >\n <Icon name='flag-finish' />\n <span>{t('task_manager_wrap_up')}</span>\n </Flex>\n </Button>\n )}\n {addTask && (\n <>\n <Button\n variant='primary'\n onClick={() => setShowPicker(cur => !cur)}\n ref={setAddTaskEl}\n >\n <Flex\n container={{\n gap: 1,\n alignItems: 'center'\n }}\n >\n <Icon name='plus' />\n <span>{t('task_manager_add_task')}</span>\n </Flex>\n </Button>\n <StyledPopover\n show={showPicker}\n target={addTaskEl}\n placement='bottom-end'\n modifiers={[\n {\n name: 'offset',\n options: {\n offset: [\n tryCatch(\n () => stripUnit(remToPx(theme.base.spacing)),\n () => 8\n ),\n tryCatch(\n () => stripUnit(remToPx(theme.base.spacing)),\n () => 8\n )\n ]\n }\n }\n ]}\n >\n <Picker\n scrollAt={10}\n emptyText={t('task_manager_search_results_empty_text')}\n items={addTask?.items}\n onAdd={(selectedItems: SelectedItemProps[]) => {\n if (addTask.onAdd) {\n addTask?.onAdd(selectedItems);\n }\n setShowPicker(false);\n }}\n onCancel={() => {\n setShowPicker(false);\n }}\n ref={addTask.ref}\n placeholder={t('search_tasks')}\n />\n </StyledPopover>\n </>\n )}\n </Flex>\n }\n >\n {hasActiveTask && <TaskManagerTabs ref={TaskManagerTabsRef} />}\n {hasActiveTask && <StyledTaskMain>{main}</StyledTaskMain>}\n {!hasActiveTask && (\n <Grid as='ul' container>\n {tasks.map(({ name, id, status, isResolved, meta, icon, ...restTaskProps }) => {\n return (\n <SummaryItem\n {...restTaskProps}\n key={id}\n as={StyledTaskSummaryItem}\n primary={<Text variant='h4'>{name}</Text>}\n secondary={\n <>\n {!status && meta && <Text variant='secondary'>{meta}</Text>}\n {status && <Status variant={status.variant}>{status.text}</Status>}\n </>\n }\n visual={<Icon name={icon} />}\n actions={\n <Flex container={{ gap: 1 }}>\n {!isResolved && (\n <Button\n variant='secondary'\n aria-label={t('continue_label_a11y', [name])}\n onClick={() => {\n onTaskLaunch?.(id);\n }}\n >\n {t('continue_label')}\n </Button>\n )}\n {isResolved && (\n <Button\n variant='secondary'\n aria-label={t('review_label_a11y', [name])}\n onClick={() => {\n onTaskLaunch?.(id);\n }}\n >\n {t('review_label')}\n </Button>\n )}\n </Flex>\n }\n />\n );\n })}\n {tasks.length === 0 && <EmptyState message={emptyText} />}\n </Grid>\n )}\n </TaskView>\n </StyledTaskManager>\n </div>\n </TaskManagerContext.Provider>\n );\n }\n);\n\nexport default TaskManager;\n"]}

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { TaskManagerTabProps } from './TaskManager.types';
+import { TaskManagerTabProps, DialogueProps } from './TaskManager.types';
 export declare const StyledTaskMain: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledTaskManagerTabsSummaryItem: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledTaskManagerTabs: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
@@ -16,5 +16,15 @@ interface StyledTaskManagerProps {
 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").FunctionComponent<import("@pega/cosmos-react-core").IconProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledSymbol: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").IconProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {
+    verbatimStatus?: DialogueProps['verbatimStatus'];
+}, never>;
+export declare const StyledIconWrapSuccess: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {
+    verbatimStatus?: DialogueProps['verbatimStatus'];
+}, never>;
+export declare const StyledIconWrapAlert: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {
+    verbatimStatus?: DialogueProps['verbatimStatus'];
+}, never>;
 export default StyledTaskManager;
 //# sourceMappingURL=TaskManager.styles.d.ts.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"TaskManager.styles.d.ts","sourceRoot":"","sources":["../../../src/components/TaskManager/TaskManager.styles.ts"],"names":[],"mappings":";~~AAkBA~~,OAAO,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;~~AAE1D~~,eAAO,MAAM,cAAc,yGAAe,CAAC;AAC3C,eAAO,MAAM,gCAAgC,yGAAe,CAAC;AAE7D,eAAO,MAAM,qBAAqB,yGAahC,CAAC;AAIH,eAAO,MAAM,qBAAqB,wGAWhC,CAAC;AAIH,eAAO,MAAM,aAAa,0GAMxB,CAAC;AAEH,eAAO,MAAM,gBAAgB,sNAI3B,CAAC;AAKH,eAAO,MAAM,oBAAoB,yHAqE/B,CAAC;AAIH,eAAO,MAAM,kBAAkB,wGAwB7B,CAAC;AAIH,eAAO,MAAM,sBAAsB,2JASjC,CAAC;AACH,eAAO,MAAM,qBAAqB,yOAahC,CAAC;AAKH,UAAU,sBAAsB;IAC9B,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,iBAAiB,6HA0C5B,CAAC;AAIH,eAAO,MAAM,uBAAuB,~~yGAYlC~~,CAAC;AAIH,eAAO,MAAM,aAAa,6VAIxB,CAAC;AAIH,eAAe,iBAAiB,CAAC"}
1	+ {"version":3,"file":"TaskManager.styles.d.ts","sourceRoot":"","sources":["../../../src/components/TaskManager/TaskManager.styles.ts"],"names":[],"mappings":";AAmBA,OAAO,EAAE,mBAAmB,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAEzE,eAAO,MAAM,cAAc,yGAAe,CAAC;AAC3C,eAAO,MAAM,gCAAgC,yGAAe,CAAC;AAE7D,eAAO,MAAM,qBAAqB,yGAahC,CAAC;AAIH,eAAO,MAAM,qBAAqB,wGAWhC,CAAC;AAIH,eAAO,MAAM,aAAa,0GAMxB,CAAC;AAEH,eAAO,MAAM,gBAAgB,sNAI3B,CAAC;AAKH,eAAO,MAAM,oBAAoB,yHAqE/B,CAAC;AAIH,eAAO,MAAM,kBAAkB,wGAwB7B,CAAC;AAIH,eAAO,MAAM,sBAAsB,2JASjC,CAAC;AACH,eAAO,MAAM,qBAAqB,yOAahC,CAAC;AAKH,UAAU,sBAAsB;IAC9B,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,iBAAiB,6HA0C5B,CAAC;AAIH,eAAO,MAAM,uBAAuB,yGAalC,CAAC;AAIH,eAAO,MAAM,aAAa,6VAIxB,CAAC;AAIH,eAAO,MAAM,qBAAqB,mOAAiB,CAAC;AAEpD,eAAO,MAAM,YAAY;qBACN,aAAa,CAAC,gBAAgB,CAAC;SA2BjD,CAAC;AAIF,eAAO,MAAM,qBAAqB;qBACf,aAAa,CAAC,gBAAgB,CAAC;SA2BjD,CAAC;AAIF,eAAO,MAAM,mBAAmB;qBA/Bb,aAAa,CAAC,gBAAgB,CAAC;SAsChD,CAAC;AAIH,eAAe,iBAAiB,CAAC"}

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

@@ -1,6 +1,6 @@
 import styled, { css } from 'styled-components';
-import { mix, transparentize } from 'polished';
-import { defaultThemeProp, MenuButton, Popover, tryCatch, Status, StyledCard, StyledEmptyState, StyledFlex } from '@pega/cosmos-react-core';
+import { mix, transparentize, rgba } from 'polished';
+import { defaultThemeProp, MenuButton, Popover, tryCatch, Status, StyledCard, StyledEmptyState, StyledFlex, Icon } 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';
@@ -215,11 +215,12 @@ StyledTaskManager.defaultProps = defaultThemeProp;
 export const StyledTaskManagerBanner = styled.div(({ theme }) => {
     return css `
     padding: calc(1.5 * ${theme.base.spacing});
-    color: ${theme.base.colors.orange.medium};
     border-radius: ${theme.base['border-radius']} ${theme.base['border-radius']} 0 0;
-    background-color: ${theme.base.colors.gray['extra-light']};
+    background-color: ${theme.base.palette['secondary-background']};
     gap: ${theme.base.spacing};
+    min-height: calc(7 * ${theme.base.spacing});
+    color: ${theme.base.palette.warn};
+    font-weight: ${theme.base['font-weight'].bold};
     & + ${StyledTaskManager} {
       margin-block-start: 0;
     }
@@ -232,5 +233,57 @@ export const StyledPopover = styled(Popover)(({ theme }) => {
   `;
 });
 StyledPopover.defaultProps = defaultThemeProp;
+export const StyledAgentScriptIcon = styled(Icon) ``;
+export const StyledSymbol = styled(Icon)(({ theme: { base: { spacing, palette } }, verbatimStatus }) => {
+    return css `
+      color: ${palette['primary-background']};
+      border-radius: 50%;
+      inset-block-start: calc(-1 * ${spacing});
+      inset-inline-end: calc(-1 * ${spacing});
+      position: absolute;
+      height: calc(2.5 * ${spacing});
+      width: calc(2.5 * ${spacing});
+      background-color: ${palette.success};
+      ${verbatimStatus === 'pending' &&
+        css `
+        background-color: ${palette.urgent};
+        text-align: center;
+        font-weight: bold;
+        line-height: calc(2.5 * ${spacing});
+      `}
+    `;
+});
+StyledSymbol.defaultProps = defaultThemeProp;
+export const StyledIconWrapSuccess = styled.span(({ theme: { base: { spacing, colors, palette } }, verbatimStatus }) => {
+    return css `
+      background-color: ${colors.slate.medium};
+      height: calc(4 * ${spacing});
+      width: calc(4 * ${spacing});
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 50%;
+      ${verbatimStatus &&
+        css `
+        position: relative;
+      `}
+      ${StyledAgentScriptIcon} {
+        color: ${colors.white};
+        background-color: ${rgba(palette.info, 0.1)};
+      }
+    `;
+});
+StyledIconWrapSuccess.defaultProps = defaultThemeProp;
+export const StyledIconWrapAlert = styled(StyledIconWrapSuccess)(({ theme }) => {
+    return css `
+    background-color: ${theme.base.colors.red['extra-light']};
+    ${StyledAgentScriptIcon} {
+      color: ${theme.base.colors.black};
+    }
+  `;
+});
+StyledIconWrapAlert.defaultProps = defaultThemeProp;
 export default StyledTaskManager;
 //# sourceMappingURL=TaskManager.styles.js.map

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

	@@ -1 +1 @@
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, transparentize } from 'polished';\n\nimport {\n defaultThemeProp,\n MenuButton,\n Popover,\n tryCatch,\n Status,\n StyledCard,\n StyledEmptyState,\n StyledFlex\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';\n\nimport { TaskManagerTabProps } from './TaskManager.types';\n\nexport const StyledTaskMain = styled.div``;\nexport const StyledTaskManagerTabsSummaryItem = styled.div``;\n\nexport const StyledTaskManagerTabs = styled.div(({ theme }) => {\n return css`\n background-color: ${theme.base.palette['secondary-background']};\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\nexport const StyledTaskStatus = styled(Status)(({ theme }) => {\n return css`\n margin-block-start: calc(0.25 * ${theme.base.spacing});\n `;\n});\n\nStyleTaskName.defaultProps = defaultThemeProp;\nStyledTaskStatus.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 max-width: 36ch;\n min-width: 28ch;\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 flex: 1;\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}) calc(1 * ${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: inset ${theme.base.shadow.focus};\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 ${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});\nexport const StyledOverflowTabMenu = styled(MenuButton)(({ theme }) => {\n return css`\n border-radius: 0;\n display: inline-block;\n position: relative;\n inset-inline-end: 0;\n inset-block-start: 0;\n align-self: stretch;\n margin-inline-start: auto;\n background-color: ${theme.base.palette['secondary-background']};\n border-block-end: 0.0625rem solid ${theme.base.palette['border-line']};\n padding: 0 ${theme.base.spacing};\n `;\n});\n\nStyledStickyCardHeader.defaultProps = defaultThemeProp;\nStyledOverflowTabMenu.defaultProps = defaultThemeProp;\n\ninterface StyledTaskManagerProps {\n hasDrawer?: boolean;\n}\n\nexport const StyledTaskManager = styled.div<StyledTaskManagerProps>(({ theme, hasDrawer }) => {\n const primaryBackgroundColor = theme.base.palette['primary-background'];\n return css`\n background: ${primaryBackgroundColor};\n position: relative;\n border-radius: 0 0 0.5rem 0.5rem;\n ${hasDrawer &&\n css`\n box-shadow: ${theme.base.shadow.low};\n `}\n\n ${StyledStatus} {\n line-height: calc(${theme.base.spacing} * 2);\n height: calc(${theme.base.spacing} * 2);\n font-size: 0.7rem;\n }\n\n ${StyledCardContent} {\n &:not(${StyledCard} ${StyledCard} > &) {\n padding: 0;\n }\n }\n ${StyledTaskMain} {\n padding: 0 calc(2 * ${theme.base.spacing}) calc(2 * ${theme.base.spacing});\n ${StyledCardHeader} {\n padding: calc(2 * ${theme.base.spacing}) 0 ${theme.base.spacing};\n margin-block-end: ${theme.base.spacing};\n border-block-end: none;\n }\n }\n ${StyledEmptyState} {\n padding: calc(2 * ${theme.base.spacing});\n }\n ${StyledTaskManagerTabs} {\n position: relative;\n }\n ${StyledTaskManagerTab} {\n > ${StyledTaskManagerTabsSummaryItem} > ${StyledVisual} {\n margin: 0 calc(2 * ${theme.base.spacing});\n }\n }\n `;\n});\n\nStyledTaskManager.defaultProps = defaultThemeProp;\n\nexport const StyledTaskManagerBanner = styled.div(({ theme }) => {\n return css`\n padding: calc(1.5 * ${theme.base.spacing});\n color: ${theme.base.colors.orange.medium};\n border-radius: ${theme.base['border-radius']} ${theme.base['border-radius']} 0 0;\n background-color: ${theme.base.colors.gray['extra-light']};\n gap: ${theme.base.spacing};\n\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 default StyledTaskManager;\n"]}
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, transparentize, rgba } from 'polished';\n\nimport {\n defaultThemeProp,\n MenuButton,\n Popover,\n tryCatch,\n Status,\n StyledCard,\n StyledEmptyState,\n StyledFlex,\n Icon\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';\n\nimport { TaskManagerTabProps, DialogueProps } from './TaskManager.types';\n\nexport const StyledTaskMain = styled.div``;\nexport const StyledTaskManagerTabsSummaryItem = styled.div``;\n\nexport const StyledTaskManagerTabs = styled.div(({ theme }) => {\n return css`\n background-color: ${theme.base.palette['secondary-background']};\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\nexport const StyledTaskStatus = styled(Status)(({ theme }) => {\n return css`\n margin-block-start: calc(0.25 * ${theme.base.spacing});\n `;\n});\n\nStyleTaskName.defaultProps = defaultThemeProp;\nStyledTaskStatus.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 max-width: 36ch;\n min-width: 28ch;\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 flex: 1;\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}) calc(1 * ${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: inset ${theme.base.shadow.focus};\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 ${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});\nexport const StyledOverflowTabMenu = styled(MenuButton)(({ theme }) => {\n return css`\n border-radius: 0;\n display: inline-block;\n position: relative;\n inset-inline-end: 0;\n inset-block-start: 0;\n align-self: stretch;\n margin-inline-start: auto;\n background-color: ${theme.base.palette['secondary-background']};\n border-block-end: 0.0625rem solid ${theme.base.palette['border-line']};\n padding: 0 ${theme.base.spacing};\n `;\n});\n\nStyledStickyCardHeader.defaultProps = defaultThemeProp;\nStyledOverflowTabMenu.defaultProps = defaultThemeProp;\n\ninterface StyledTaskManagerProps {\n hasDrawer?: boolean;\n}\n\nexport const StyledTaskManager = styled.div<StyledTaskManagerProps>(({ theme, hasDrawer }) => {\n const primaryBackgroundColor = theme.base.palette['primary-background'];\n return css`\n background: ${primaryBackgroundColor};\n position: relative;\n border-radius: 0 0 0.5rem 0.5rem;\n ${hasDrawer &&\n css`\n box-shadow: ${theme.base.shadow.low};\n `}\n\n ${StyledStatus} {\n line-height: calc(${theme.base.spacing} * 2);\n height: calc(${theme.base.spacing} * 2);\n font-size: 0.7rem;\n }\n\n ${StyledCardContent} {\n &:not(${StyledCard} ${StyledCard} > &) {\n padding: 0;\n }\n }\n ${StyledTaskMain} {\n padding: 0 calc(2 * ${theme.base.spacing}) calc(2 * ${theme.base.spacing});\n ${StyledCardHeader} {\n padding: calc(2 * ${theme.base.spacing}) 0 ${theme.base.spacing};\n margin-block-end: ${theme.base.spacing};\n border-block-end: none;\n }\n }\n ${StyledEmptyState} {\n padding: calc(2 * ${theme.base.spacing});\n }\n ${StyledTaskManagerTabs} {\n position: relative;\n }\n ${StyledTaskManagerTab} {\n > ${StyledTaskManagerTabsSummaryItem} > ${StyledVisual} {\n margin: 0 calc(2 * ${theme.base.spacing});\n }\n }\n `;\n});\n\nStyledTaskManager.defaultProps = defaultThemeProp;\n\nexport const StyledTaskManagerBanner = styled.div(({ theme }) => {\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: ${theme.base.palette.warn};\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(Icon)<{\n verbatimStatus?: DialogueProps['verbatimStatus'];\n}>(\n ({\n theme: {\n base: { spacing, palette }\n },\n verbatimStatus\n }) => {\n return css`\n color: ${palette['primary-background']};\n border-radius: 50%;\n inset-block-start: calc(-1 * ${spacing});\n inset-inline-end: calc(-1 * ${spacing});\n position: absolute;\n height: calc(2.5 * ${spacing});\n width: calc(2.5 * ${spacing});\n background-color: ${palette.success};\n\n ${verbatimStatus === 'pending' &&\n css`\n background-color: ${palette.urgent};\n text-align: center;\n font-weight: bold;\n line-height: calc(2.5 * ${spacing});\n `}\n `;\n }\n);\n\nStyledSymbol.defaultProps = defaultThemeProp;\n\nexport const StyledIconWrapSuccess = styled.span<{\n verbatimStatus?: DialogueProps['verbatimStatus'];\n}>(\n ({\n theme: {\n base: { spacing, colors, palette }\n },\n verbatimStatus\n }) => {\n return css`\n background-color: ${colors.slate.medium};\n height: calc(4 * ${spacing});\n width: calc(4 * ${spacing});\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n ${verbatimStatus &&\n css`\n position: relative;\n `}\n\n ${StyledAgentScriptIcon} {\n color: ${colors.white};\n background-color: ${rgba(palette.info, 0.1)};\n }\n `;\n }\n);\n\nStyledIconWrapSuccess.defaultProps = defaultThemeProp;\n\nexport const StyledIconWrapAlert = styled(StyledIconWrapSuccess)(({ theme }) => {\n return css`\n background-color: ${theme.base.colors.red['extra-light']};\n ${StyledAgentScriptIcon} {\n color: ${theme.base.colors.black};\n }\n `;\n});\n\nStyledIconWrapAlert.defaultProps = defaultThemeProp;\n\nexport default StyledTaskManager;\n"]}

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

@@ -1,8 +1,10 @@
 import { ReactNode, Ref } from 'react';
-import { BaseProps, MenuItemProps, NoChildrenProp, StatusProps } from '@pega/cosmos-react-core';
+import { BaseProps, IconNames, MenuItemProps, NoChildrenProp, StatusProps } from '@pega/cosmos-react-core';
 import { PickerProps } from './Picker/Picker.types';
+export interface HandleProps {
+    nudge: () => Animation | undefined;
+}
 export interface TaskManagerProps extends BaseProps, NoChildrenProp {
-    ref?: Ref<HTMLDivElement>;
     /** List of tasks */
     tasks?: TaskProps[];
     /** Empty text to be shown when no tasks are added */
@@ -14,12 +16,7 @@ export interface TaskManagerProps extends BaseProps, NoChildrenProp {
     /** Add task utility */
     addTask?: Pick<PickerProps, 'items' | 'onAdd' | 'ref'>;
     /** Banner for the task manager */
-    banner?: {
-        /** Icon for the banner */
-        icon: string;
-        /** Banner content */
-        content: string;
-    };
+    banner?: Pick<DialogueProps, 'icon' | 'content' | 'verbatimStatus'>;
     /** Shows wrap up action when passed */
     wrapUp?: {
         /** Determines if wrap up button should be enabled */
@@ -33,6 +30,8 @@ export interface TaskManagerProps extends BaseProps, NoChildrenProp {
     };
     /** Selected task content */
     main?: ReactNode;
+    ref?: Ref<HTMLDivElement>;
+    handle?: Ref<HandleProps>;
 }
 export interface TaskManagerTabsProps {
     ref?: Ref<HTMLDivElement>;
@@ -42,13 +41,23 @@ export interface TaskManagerTabProps {
     variant?: string;
 }
 export interface TaskViewProps extends BaseProps {
-    ref?: Ref<HTMLDivElement>;
     /** 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: IconNames;
+    /** Banner content */
+    content: string;
+    /** Type of banner icon */
+    verbatimStatus?: 'pending' | 'spoken';
+    ref?: Ref<HTMLDivElement>;
+    handle?: Ref<HandleProps>;
 }
 export interface TaskManagerContextProps extends Pick<TaskManagerProps, 'tasks' | 'addTask' | 'onTaskLaunch' | 'wrapUp'> {
 }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"TaskManager.types.d.ts","sourceRoot":"","sources":["../../../src/components/TaskManager/TaskManager.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,~~EAAE~~,SAAS,~~EAAE~~,aAAa,~~EAAE~~,cAAc,~~EAAE~~,WAAW,~~EAAE~~,MAAM,yBAAyB,CAAC;~~AAEhG~~,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAEpD,MAAM,WAAW,~~gBAAiB~~,~~SAAQ~~,~~SAAS,~~EAAE,~~cAAc;IACjE~~,GAAG,CAAC,~~EAAE~~,~~GAAG~~,~~CAAC~~,~~cAAc~~,~~CAAC~~,~~CAAC~~;~~IAC1B~~,oBAAoB;IACpB,KAAK,CAAC,EAAE,SAAS,EAAE,CAAC;IACpB,qDAAqD;IACrD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qCAAqC;IACrC,YAAY,CAAC,EAAE,CAAC,EAAE,EAAE,SAAS,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IAC7C,4FAA4F;IAC5F,aAAa,CAAC,EAAE,CAAC,EAAE,EAAE,SAAS,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IAC9C,uBAAuB;IACvB,OAAO,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,OAAO,GAAG,OAAO,GAAG,KAAK,CAAC,CAAC;IACvD,kCAAkC;IAClC,MAAM,CAAC,EAAE~~;QACP~~,~~0BAA0B;QAC1B,~~IAAI,EAAE,MAAM,~~CAAC;QACb~~,~~qBAAqB;QACrB~~,~~OAAO~~,~~EAAE~~,~~MAAM,~~CAAC~~;KACjB~~,CAAC;~~IACF~~,uCAAuC;IACvC,MAAM,CAAC,EAAE;QACP,qDAAqD;QACrD,OAAO,EAAE,OAAO,CAAC;QACjB,yCAAyC;QACzC,OAAO,EAAE,MAAM,IAAI,CAAC;QACpB,sCAAsC;QACtC,MAAM,CAAC,EAAE,OAAO,CAAC;QACjB,uDAAuD;QACvD,OAAO,CAAC,EAAE,OAAO,CAAC;KACnB,CAAC;IACF,4BAA4B;IAC5B,IAAI,CAAC,EAAE,SAAS,CAAC;~~CAClB~~;AAED,MAAM,WAAW,oBAAoB;IACnC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,MAAM,WAAW,mBAAmB;IAClC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AACD,MAAM,WAAW,aAAc,SAAQ,SAAS;IAC9C,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;~~IAC1B,kBAAkB~~;~~IAClB~~,MAAM,EAAE,SAAS,CAAC;~~IAClB~~,~~4BAA4B~~;~~IAC5B~~,OAAO,CAAC,EAAE,SAAS,CAAC;~~IACpB~~,~~wBAAwB~~;~~IACxB~~,~~QAAQ~~,EAAE,~~SAAS~~,CAAC;~~CACrB~~;AAED,MAAM,WAAW,uBACf,SAAQ,IAAI,CAAC,gBAAgB,EAAE,OAAO,GAAG,SAAS,GAAG,cAAc,GAAG,QAAQ,CAAC;CAAG;AAEpF,MAAM,WAAW,SAAS;IACxB,+BAA+B;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,uBAAuB;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,4CAA4C;IAC5C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oEAAoE;IACpE,SAAS,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;IACvC,mEAAmE;IACnE,IAAI,EAAE,MAAM,CAAC;IACb,0CAA0C;IAC1C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,iCAAiC;IACjC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,uCAAuC;IACvC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,qFAAqF;IACrF,MAAM,CAAC,EAAE;QACP,kBAAkB;QAClB,IAAI,EAAE,MAAM,CAAC;QACb,qBAAqB;QACrB,OAAO,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;KACjC,CAAC;CACH"}
1	+ {"version":3,"file":"TaskManager.types.d.ts","sourceRoot":"","sources":["../../../src/components/TaskManager/TaskManager.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EACL,SAAS,EACT,SAAS,EACT,aAAa,EACb,cAAc,EACd,WAAW,EACZ,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAEpD,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,SAAS,GAAG,SAAS,CAAC;CACpC;AAED,MAAM,WAAW,gBAAiB,SAAQ,SAAS,EAAE,cAAc;IACjE,oBAAoB;IACpB,KAAK,CAAC,EAAE,SAAS,EAAE,CAAC;IACpB,qDAAqD;IACrD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qCAAqC;IACrC,YAAY,CAAC,EAAE,CAAC,EAAE,EAAE,SAAS,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IAC7C,4FAA4F;IAC5F,aAAa,CAAC,EAAE,CAAC,EAAE,EAAE,SAAS,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IAC9C,uBAAuB;IACvB,OAAO,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,OAAO,GAAG,OAAO,GAAG,KAAK,CAAC,CAAC;IACvD,kCAAkC;IAClC,MAAM,CAAC,EAAE,IAAI,CAAC,aAAa,EAAE,MAAM,GAAG,SAAS,GAAG,gBAAgB,CAAC,CAAC;IACpE,uCAAuC;IACvC,MAAM,CAAC,EAAE;QACP,qDAAqD;QACrD,OAAO,EAAE,OAAO,CAAC;QACjB,yCAAyC;QACzC,OAAO,EAAE,MAAM,IAAI,CAAC;QACpB,sCAAsC;QACtC,MAAM,CAAC,EAAE,OAAO,CAAC;QACjB,uDAAuD;QACvD,OAAO,CAAC,EAAE,OAAO,CAAC;KACnB,CAAC;IACF,4BAA4B;IAC5B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,MAAM,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CAC3B;AAED,MAAM,WAAW,oBAAoB;IACnC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,MAAM,WAAW,mBAAmB;IAClC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AACD,MAAM,WAAW,aAAc,SAAQ,SAAS;IAC9C,kBAAkB;IAClB,MAAM,EAAE,SAAS,CAAC;IAClB,4BAA4B;IAC5B,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,wBAAwB;IACxB,QAAQ,EAAE,SAAS,CAAC;IACpB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,MAAM,WAAW,aAAc,SAAQ,SAAS;IAC9C,0BAA0B;IAC1B,IAAI,EAAE,SAAS,CAAC;IAChB,qBAAqB;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,0BAA0B;IAC1B,cAAc,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IACtC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,MAAM,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CAC3B;AAED,MAAM,WAAW,uBACf,SAAQ,IAAI,CAAC,gBAAgB,EAAE,OAAO,GAAG,SAAS,GAAG,cAAc,GAAG,QAAQ,CAAC;CAAG;AAEpF,MAAM,WAAW,SAAS;IACxB,+BAA+B;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,uBAAuB;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,4CAA4C;IAC5C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oEAAoE;IACpE,SAAS,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;IACvC,mEAAmE;IACnE,IAAI,EAAE,MAAM,CAAC;IACb,0CAA0C;IAC1C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,iCAAiC;IACjC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,uCAAuC;IACvC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,qFAAqF;IACrF,MAAM,CAAC,EAAE;QACP,kBAAkB;QAClB,IAAI,EAAE,MAAM,CAAC;QACb,qBAAqB;QACrB,OAAO,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;KACjC,CAAC;CACH"}

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

	@@ -1 +1 @@
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 { BaseProps, MenuItemProps, NoChildrenProp, StatusProps } from '@pega/cosmos-react-core';\n\nimport { PickerProps } from './Picker/Picker.types';\n\nexport interface TaskManagerProps extends BaseProps, NoChildrenProp {\n ~~ref?: Ref<HTMLDivElement>;\n~~ /** List of tasks /\n tasks?: TaskProps[];\n /* Empty text to be shown when no tasks are added /\n emptyText?: string;\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<PickerProps, 'items' \| 'onAdd' \| 'ref'>;\n /* Banner for the task manager /\n banner?: {\n /* ~~Icon for the banner /\n~~ icon: string;\n /* ~~Banner~~ content /\n content: ~~string;\~~n ~~};\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}\n\nexport interface TaskManagerTabsProps {\n ref?: Ref<HTMLDivElement>;\n}\n\nexport interface TaskManagerTabProps {\n active?: boolean;\n variant?: string;\n}\nexport interface TaskViewProps extends BaseProps {\n ~~ref?: Ref<HTMLDivElement>;\n~~ /* Task header /\n header: ReactNode;\n /* Task specific actions /\n actions?: ReactNode;\n /* Task form content /\n children: ReactNode;\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"]}
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 IconNames,\n MenuItemProps,\n NoChildrenProp,\n StatusProps\n} from '@pega/cosmos-react-core';\n\nimport { PickerProps } from './Picker/Picker.types';\n\nexport interface HandleProps {\n nudge: () => Animation \| undefined;\n}\n\nexport interface TaskManagerProps extends BaseProps, NoChildrenProp {\n /** List of tasks /\n tasks?: TaskProps[];\n /* Empty text to be shown when no tasks are added /\n emptyText?: string;\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<PickerProps, '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 ref?: Ref<HTMLDivElement>;\n handle?: Ref<HandleProps>;\n}\n\nexport interface TaskManagerTabsProps {\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: IconNames;\n /* Banner content /\n content: string;\n /* Type of banner icon /\n verbatimStatus?: 'pending' \| 'spoken';\n ref?: Ref<HTMLDivElement>;\n handle?: Ref<HandleProps>;\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/index.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 export { default } from './TaskManager';
 export { default as TaskView } from './TaskView';
-export { TaskManagerProps, TaskProps, TaskManagerTabsProps, TaskViewProps } from './TaskManager.types';
+export { TaskManagerProps, TaskProps, TaskManagerTabsProps, TaskViewProps, DialogueProps } from './TaskManager.types';
 export { default as Picker } from './Picker/Picker';
 //# sourceMappingURL=index.d.ts.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/TaskManager/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EACL,gBAAgB,EAChB,SAAS,EACT,oBAAoB,EACpB,aAAa,EACd,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/TaskManager/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EACL,gBAAgB,EAChB,SAAS,EACT,oBAAoB,EACpB,aAAa,EACb,aAAa,EACd,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC"}

package/lib/components/TaskManager/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/TaskManager/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;~~AAOjD~~,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC","sourcesContent":["export { default } from './TaskManager';\nexport { default as TaskView } from './TaskView';\nexport {\n TaskManagerProps,\n TaskProps,\n TaskManagerTabsProps,\n TaskViewProps\n} from './TaskManager.types';\nexport { default as Picker } from './Picker/Picker';\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/TaskManager/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AAQjD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC","sourcesContent":["export { default } from './TaskManager';\nexport { default as TaskView } from './TaskView';\nexport {\n TaskManagerProps,\n TaskProps,\n TaskManagerTabsProps,\n TaskViewProps,\n DialogueProps\n} from './TaskManager.types';\nexport { default as Picker } from './Picker/Picker';\n"]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@pega/cosmos-react-cs",
-  "version": "3.0.0-dev.10.1",
+  "version": "3.0.0-dev.11.0",
   "author": "Pegasystems",
   "license": "SEE LICENSE IN LICENSE",
   "repository": {
@@ -20,8 +20,8 @@
     "build": "tsc -b"
   },
   "dependencies": {
-    "@pega/cosmos-react-core": "3.0.0-dev.10.1",
-    "@pega/cosmos-react-dnd": "3.0.0-dev.10.1",
+    "@pega/cosmos-react-core": "3.0.0-dev.11.0",
+    "@pega/cosmos-react-dnd": "3.0.0-dev.11.0",
     "@types/react": "^16.14.24 || ^17.0.38",
     "@types/react-dom": "^16.9.14 || ^17.0.11",
     "@types/styled-components": "^5.1.7",