npm - @pega/cosmos-react-cs - Versions diffs - 2.0.0-dev.12.1 → 2.0.0-dev.14.2 - Mend

@pega/cosmos-react-cs 2.0.0-dev.12.1 → 2.0.0-dev.14.2

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

Files changed (73) hide show

package/lib/components/Article/ArticleFooter.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ArticleFooter.d.ts","sourceRoot":"","sources":["../../../src/components/Article/ArticleFooter.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,iBAAiB,EAA2B,MAAM,OAAO,CAAC;AAG9E,OAAO,EAA+B,SAAS,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAG/F,MAAM,WAAW,UAAU;IACzB,eAAe;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,kDAAkD;IAClD,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,MAAM,WAAW,kBAAmB,SAAQ,SAAS;IACnD,mBAAmB;IACnB,IAAI,CAAC,EAAE,UAAU,EAAE,CAAC;IACpB,6CAA6C;IAC7C,UAAU,CAAC,EAAE,CAAC,EAAE,EAAE,UAAU,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IAC5C,qBAAqB;IACrB,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AA6BD,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,~~CA0CvE~~,CAAC;AAEF,eAAe,aAAa,CAAC"}
1	+ {"version":3,"file":"ArticleFooter.d.ts","sourceRoot":"","sources":["../../../src/components/Article/ArticleFooter.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,iBAAiB,EAA2B,MAAM,OAAO,CAAC;AAG9E,OAAO,EAA+B,SAAS,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAG/F,MAAM,WAAW,UAAU;IACzB,eAAe;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,kDAAkD;IAClD,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,MAAM,WAAW,kBAAmB,SAAQ,SAAS;IACnD,mBAAmB;IACnB,IAAI,CAAC,EAAE,UAAU,EAAE,CAAC;IACpB,6CAA6C;IAC7C,UAAU,CAAC,EAAE,CAAC,EAAE,EAAE,UAAU,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IAC5C,qBAAqB;IACrB,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AA6BD,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,CAyCvE,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/components/Article/ArticleFooter.js CHANGED Viewed

@@ -34,7 +34,7 @@ const ArticleFooter = (props) => {
     return (_jsxs(Flex, Object.assign({ as: StyledArticleFooter, container: {
             direction: 'column',
             gap: 2
-        } }, restProps, { children: [content, tags && (_jsx(Flex, Object.assign({ container: { wrap: 'wrap' }, as: StyledTags }, { children: tags.map(tag => (_jsx(Tag, Object.assign({ tabIndex: 0, type: 'pill', variant: 'light', "data-tag-id": tag.id, title: tag.tagName, onClick: onTagClickHandler, rel: 'tag' }, { children: tag.tagName }), tag.id))) }), void 0))] }), void 0));
+        } }, restProps, { children: [content, tags && (_jsx(Flex, Object.assign({ container: { wrap: 'wrap' }, as: StyledTags }, { children: tags.map(tag => (_jsx(Tag, Object.assign({ tabIndex: 0, type: 'pill', variant: 'light', "data-tag-id": tag.id, onClick: onTagClickHandler, rel: 'tag' }, { children: tag.tagName }), tag.id))) }), void 0))] }), void 0));
 };
 export default ArticleFooter;
 //# sourceMappingURL=ArticleFooter.js.map

package/lib/components/Article/ArticleFooter.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ArticleFooter.js","sourceRoot":"","sources":["../../../src/components/Article/ArticleFooter.tsx"],"names":[],"mappings":";AAAA,OAAO,EAA4C,WAAW,EAAE,MAAM,OAAO,CAAC;AAC9E,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,gBAAgB,EAA2B,MAAM,yBAAyB,CAAC;AAC/F,OAAO,EAAE,SAAS,EAAE,MAAM,mDAAmD,CAAC;AAkB9E,MAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACnD,OAAO,GAAG,CAAA;;;;;oBAKQ,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;;gCAErB,KAAK,CAAC,IAAI,CAAC,OAAO;;GAE/C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEpD,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC1C,OAAO,GAAG,CAAA;2BACe,KAAK,CAAC,IAAI,CAAC,OAAO;4BACjB,KAAK,CAAC,IAAI,CAAC,OAAO;UACpC,SAAS;4BACS,KAAK,CAAC,IAAI,CAAC,OAAO;;GAE3C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,UAAU,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3C,MAAM,aAAa,GAAyD,CAC1E,KAAyB,EACzB,EAAE;IACF,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAE1D,MAAM,iBAAiB,GAAG,WAAW,CACnC,CAAC,KAA8B,EAAE,EAAE;QACjC,UAAU,EAAE,CAAC,KAAK,CAAC,aAAa,CAAC,OAAO,CAAC,KAAM,CAAC,CAAC;IACnD,CAAC,EACD,CAAC,UAAU,CAAC,CACb,CAAC;IAEF,OAAO,CACL,MAAC,IAAI,kBACH,EAAE,EAAE,mBAAmB,EACvB,SAAS,EAAE;YACT,SAAS,EAAE,QAAQ;YACnB,GAAG,EAAE,CAAC;SACP,IACG,SAAS,eAEZ,OAAO,EACP,IAAI,IAAI,CACP,KAAC,IAAI,kBAAC,SAAS,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,UAAU,gBAC9C,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,CACf,KAAC,GAAG,kBACF,QAAQ,EAAE,CAAC,EACX,IAAI,EAAC,MAAM,EACX,OAAO,EAAC,OAAO,iBAEF,GAAG,CAAC,EAAE,EACnB,~~KAAK,EAAE,GAAG,CAAC,~~OAAO,~~EAClB,OAAO,~~EAAE,iBAAiB,EAC1B,GAAG,EAAC,KAAK,gBAER,GAAG,CAAC,OAAO,~~KANP~~,GAAG,CAAC,EAAE,~~CAOP~~,CACP,CAAC,YACG,CACR,aACI,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import { ReactNode, FunctionComponent, MouseEvent, useCallback } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Flex, Tag, defaultThemeProp, BaseProps, ForwardProps } from '@pega/cosmos-react-core';\nimport { StyledTag } from '@pega/cosmos-react-core/lib/components/Badges/Tag';\n\nexport interface ArticleTag {\n /** Tag name /\n tagName: string;\n /* Tag id. If not set tagName is treated as id /\n id: string;\n}\n\nexport interface ArticleFooterProps extends BaseProps {\n /* Article tags /\n tags?: ArticleTag[];\n /* Callback that triggers on click of tag /\n onTagClick?: (id: ArticleTag['id']) => void;\n /* Footer content /\n content?: ReactNode;\n}\n\nconst StyledArticleFooter = styled.div(({ theme }) => {\n return css`\n flex-shrink: 0;\n &::before {\n content: '';\n display: block;\n background: ${theme.base.palette['border-line']};\n height: 0.0625rem;\n margin-bottom: calc(2 ${theme.base.spacing});\n }\n `;\n});\n\nStyledArticleFooter.defaultProps = defaultThemeProp;\n\nconst StyledTags = styled.div(({ theme }) => {\n return css`\n padding: calc(0.25 * ${theme.base.spacing});\n margin: 0 calc(-0.5 * ${theme.base.spacing});\n & > ${StyledTag} {\n margin: calc(0.25 * ${theme.base.spacing});\n }\n `;\n});\n\nStyledTags.defaultProps = defaultThemeProp;\n\nconst ArticleFooter: FunctionComponent<ArticleFooterProps & ForwardProps> = (\n props: ArticleFooterProps\n) => {\n const { content, tags, onTagClick, ...restProps } = props;\n\n const onTagClickHandler = useCallback(\n (event: MouseEvent<HTMLElement>) => {\n onTagClick?.(event.currentTarget.dataset.tagId!);\n },\n [onTagClick]\n );\n\n return (\n <Flex\n as={StyledArticleFooter}\n container={{\n direction: 'column',\n gap: 2\n }}\n {...restProps}\n >\n {content}\n {tags && (\n <Flex container={{ wrap: 'wrap' }} as={StyledTags}>\n {tags.map(tag => (\n <Tag\n tabIndex={0}\n type='pill'\n variant='light'\n key={tag.id}\n data-tag-id={tag.id}\n ~~title={tag.tagName}\n~~ onClick={onTagClickHandler}\n rel='tag'\n >\n {tag.tagName}\n </Tag>\n ))}\n </Flex>\n )}\n </Flex>\n );\n};\n\nexport default ArticleFooter;\n"]}
1	+ {"version":3,"file":"ArticleFooter.js","sourceRoot":"","sources":["../../../src/components/Article/ArticleFooter.tsx"],"names":[],"mappings":";AAAA,OAAO,EAA4C,WAAW,EAAE,MAAM,OAAO,CAAC;AAC9E,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,gBAAgB,EAA2B,MAAM,yBAAyB,CAAC;AAC/F,OAAO,EAAE,SAAS,EAAE,MAAM,mDAAmD,CAAC;AAkB9E,MAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACnD,OAAO,GAAG,CAAA;;;;;oBAKQ,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;;gCAErB,KAAK,CAAC,IAAI,CAAC,OAAO;;GAE/C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEpD,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC1C,OAAO,GAAG,CAAA;2BACe,KAAK,CAAC,IAAI,CAAC,OAAO;4BACjB,KAAK,CAAC,IAAI,CAAC,OAAO;UACpC,SAAS;4BACS,KAAK,CAAC,IAAI,CAAC,OAAO;;GAE3C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,UAAU,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3C,MAAM,aAAa,GAAyD,CAC1E,KAAyB,EACzB,EAAE;IACF,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAE1D,MAAM,iBAAiB,GAAG,WAAW,CACnC,CAAC,KAA8B,EAAE,EAAE;QACjC,UAAU,EAAE,CAAC,KAAK,CAAC,aAAa,CAAC,OAAO,CAAC,KAAM,CAAC,CAAC;IACnD,CAAC,EACD,CAAC,UAAU,CAAC,CACb,CAAC;IAEF,OAAO,CACL,MAAC,IAAI,kBACH,EAAE,EAAE,mBAAmB,EACvB,SAAS,EAAE;YACT,SAAS,EAAE,QAAQ;YACnB,GAAG,EAAE,CAAC;SACP,IACG,SAAS,eAEZ,OAAO,EACP,IAAI,IAAI,CACP,KAAC,IAAI,kBAAC,SAAS,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,UAAU,gBAC9C,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,CACf,KAAC,GAAG,kBACF,QAAQ,EAAE,CAAC,EACX,IAAI,EAAC,MAAM,EACX,OAAO,EAAC,OAAO,iBAEF,GAAG,CAAC,EAAE,EACnB,OAAO,EAAE,iBAAiB,EAC1B,GAAG,EAAC,KAAK,gBAER,GAAG,CAAC,OAAO,KALP,GAAG,CAAC,EAAE,CAMP,CACP,CAAC,YACG,CACR,aACI,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import { ReactNode, FunctionComponent, MouseEvent, useCallback } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Flex, Tag, defaultThemeProp, BaseProps, ForwardProps } from '@pega/cosmos-react-core';\nimport { StyledTag } from '@pega/cosmos-react-core/lib/components/Badges/Tag';\n\nexport interface ArticleTag {\n /** Tag name /\n tagName: string;\n /* Tag id. If not set tagName is treated as id /\n id: string;\n}\n\nexport interface ArticleFooterProps extends BaseProps {\n /* Article tags /\n tags?: ArticleTag[];\n /* Callback that triggers on click of tag /\n onTagClick?: (id: ArticleTag['id']) => void;\n /* Footer content /\n content?: ReactNode;\n}\n\nconst StyledArticleFooter = styled.div(({ theme }) => {\n return css`\n flex-shrink: 0;\n &::before {\n content: '';\n display: block;\n background: ${theme.base.palette['border-line']};\n height: 0.0625rem;\n margin-bottom: calc(2 ${theme.base.spacing});\n }\n `;\n});\n\nStyledArticleFooter.defaultProps = defaultThemeProp;\n\nconst StyledTags = styled.div(({ theme }) => {\n return css`\n padding: calc(0.25 * ${theme.base.spacing});\n margin: 0 calc(-0.5 * ${theme.base.spacing});\n & > ${StyledTag} {\n margin: calc(0.25 * ${theme.base.spacing});\n }\n `;\n});\n\nStyledTags.defaultProps = defaultThemeProp;\n\nconst ArticleFooter: FunctionComponent<ArticleFooterProps & ForwardProps> = (\n props: ArticleFooterProps\n) => {\n const { content, tags, onTagClick, ...restProps } = props;\n\n const onTagClickHandler = useCallback(\n (event: MouseEvent<HTMLElement>) => {\n onTagClick?.(event.currentTarget.dataset.tagId!);\n },\n [onTagClick]\n );\n\n return (\n <Flex\n as={StyledArticleFooter}\n container={{\n direction: 'column',\n gap: 2\n }}\n {...restProps}\n >\n {content}\n {tags && (\n <Flex container={{ wrap: 'wrap' }} as={StyledTags}>\n {tags.map(tag => (\n <Tag\n tabIndex={0}\n type='pill'\n variant='light'\n key={tag.id}\n data-tag-id={tag.id}\n onClick={onTagClickHandler}\n rel='tag'\n >\n {tag.tagName}\n </Tag>\n ))}\n </Flex>\n )}\n </Flex>\n );\n};\n\nexport default ArticleFooter;\n"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Call.d.ts","sourceRoot":"","sources":["../../../src/components/CallControlPanel/Call.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAgD,MAAM,OAAO,CAAC;AAExF,OAAO,EAKL,YAAY,EASb,MAAM,yBAAyB,CAAC;AAOjC,OAAO,EAAmB,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAOtE,QAAA,MAAM,IAAI,EAAE,iBAAiB,CAAC,SAAS,GAAG,YAAY,~~CA0QrD~~,CAAC;AAEF,eAAe,IAAI,CAAC"}
1	+ {"version":3,"file":"Call.d.ts","sourceRoot":"","sources":["../../../src/components/CallControlPanel/Call.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAgD,MAAM,OAAO,CAAC;AAExF,OAAO,EAKL,YAAY,EASb,MAAM,yBAAyB,CAAC;AAOjC,OAAO,EAAmB,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAOtE,QAAA,MAAM,IAAI,EAAE,iBAAiB,CAAC,SAAS,GAAG,YAAY,CA8QrD,CAAC;AAEF,eAAe,IAAI,CAAC"}

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

@@ -12,14 +12,12 @@ const Call = ({ id: callId, startedAt, onHoldSince, slaConfig, participants, onP
     const moreActionsButtonRef = useRef(null);
     const inCallSince = startedAt instanceof Date ? startedAt.getUTCMilliseconds() : startedAt;
     const [popoverEl, setPopoverRef] = useElement();
-    const [callDuration, setCallDuration] = useState(Date.now() - inCallSince);
+    const [slaLevel, setSlaLevel] = useState(undefined);
     const [showConsultPopover, setShowConsultPopover] = useState(false);
     const [showConferencePopover, setShowConferencePopover] = useState(false);
     const [showTransferPopover, setShowTransferPopover] = useState(false);
     const [showSendDTMF, setShowSendDTMF] = useState(false);
-    const { slaTimeout, slaDuration, currentSlaLevel } = Array.isArray(slaConfig) && slaConfig.length > 0 && callDuration !== undefined
-        ? calculateSla(callDuration, slaConfig)
-        : { slaTimeout: undefined, slaDuration: undefined, currentSlaLevel: undefined };
+    const { slaTimeout, slaDuration } = calculateSla(Date.now() - inCallSince, slaConfig);
     const appendConferenceAction = (actionItems) => {
         actionItems.splice(1, 0, {
             id: 'conference',
@@ -27,6 +25,10 @@ const Call = ({ id: callId, startedAt, onHoldSince, slaConfig, participants, onP
             onClick: () => setShowConferencePopover(true)
         });
     };
+    const calculateCurrentSlaLevel = () => {
+        const { currentSlaLevel } = calculateSla(Date.now() - inCallSince, slaConfig);
+        setSlaLevel(currentSlaLevel);
+    };
     const getActionItems = (item) => {
         const actionItems = [
             {
@@ -60,12 +62,13 @@ const Call = ({ id: callId, startedAt, onHoldSince, slaConfig, participants, onP
         return actionItems;
     };
     useLayoutEffect(() => {
-        setCallDuration(Date.now() - inCallSince);
-        const timer = setInterval(() => {
-            setCallDuration(Date.now() - inCallSince);
-        }, 1000);
-        return () => clearInterval(timer);
-    }, [inCallSince]);
+        calculateCurrentSlaLevel();
+        const slaDurationInMillis = slaDuration && slaDuration * 1000;
+        const timer = setTimeout(() => {
+            calculateCurrentSlaLevel();
+        }, slaDurationInMillis);
+        return () => clearTimeout(timer);
+    }, [inCallSince, slaLevel]);
     useOuterEvent('mousedown', [popoverEl], () => {
         setShowConsultPopover(false);
         setShowTransferPopover(false);
@@ -111,7 +114,7 @@ const Call = ({ id: callId, startedAt, onHoldSince, slaConfig, participants, onP
             popoverContent = (_jsx(DTMFKeypad, { onClose: () => setShowSendDTMF(false), onDialButtonClick: (key) => onDTMFPress?.(callId, String.fromCharCode(key)) }, void 0));
             break;
     }
-    return (_jsxs(StyledProgressContainer, { children: [_jsx(StyledSLAProgress, { determinate: true, placement: 'local', slaDuration: slaDuration, slaLevel: currentSlaLevel }, void 0), participants.map((item, index) => {
+    return (_jsxs(StyledProgressContainer, { children: [_jsx(StyledSLAProgress, { determinate: true, placement: 'local', slaDuration: slaDuration, slaLevel: slaLevel }, void 0), participants.map((item, index) => {
                 return (_jsx(SummaryItem, { container: index === 0
                         ? {
                             areas: '"primary secondary actions"',
@@ -125,7 +128,7 @@ const Call = ({ id: callId, startedAt, onHoldSince, slaConfig, participants, onP
                                             : 'call_panel_pause_call_menu_item') }, { children: _jsx(Icon, { name: onHoldSince !== undefined ? 'play-solid' : 'pause-solid' }, void 0) }), void 0)] }, void 0)), index === 0 && slaConfig && (_jsx(Actions, { ref: moreActionsButtonRef, items: getActionItems(item) }, void 0)), onMergeCall && (_jsx(Button, Object.assign({ icon: true, variant: 'simple', onClick: () => onMergeCall(callId), label: t('call_panel_merge_call_menu_item') }, { children: _jsx(Icon, { name: 'phone-split-solid' }, void 0) }), 'merge')), (!slaConfig || index !== 0) && (_jsx(Button, Object.assign({ icon: true, variant: 'simple', onClick: () => {
                                     if (item.onEndCall)
                                         item.onEndCall(callId, item.id);
-                                }, label: t('call_panel_hangup_call_menu_item') }, { children: _jsx(Icon, { name: 'phone-hangup-solid' }, void 0) }), 'hang_up'))] }), void 0) }, void 0));
+                                }, label: t('call_panel_hangup_call_menu_item') }, { children: _jsx(Icon, { name: 'phone-hangup-solid' }, void 0) }), 'hang_up'))] }), void 0) }, item.id));
             }), onHoldSince !== undefined && (_jsx(Status, Object.assign({ as: StyledHoldInfo, variant: 'pending' }, { children: t('call_panel_call_on_hold', (_jsx(StopWatch, { startTime: onHoldSince }, void 0))) }), void 0)), _jsx(Popover, Object.assign({ target: moreActionsButtonRef.current, ref: setPopoverRef, placement: 'top-end', show: showConsultPopover || showTransferPopover || showSendDTMF || showConferencePopover }, { children: popoverContent }), void 0)] }, void 0));
 };
 export default Call;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Call.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/Call.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, useEffect, useLayoutEffect, useRef, useState } from 'react';\n\nimport {\n Action,\n Actions,\n Button,\n Flex,\n ForwardProps,\n Icon,\n Popover,\n Status,\n SummaryItem,\n Text,\n useElement,\n useI18n,\n useOuterEvent\n} from '@pega/cosmos-react-core';\n\nimport {\n StyledHoldInfo,\n StyledProgressContainer,\n StyledSLAProgress\n} from './CallControlPanel.styles';\nimport { CallParticipant, CallProps } from './CallControlPanel.types';\nimport CalleePicker from './CalleePicker';\nimport CallTransfer from './CallTransfer';\nimport DTMFKeypad from './DTMFKeypad';\nimport StopWatch from './StopWatch';\nimport { calculateSla } from './utils';\n\nconst Call: FunctionComponent<CallProps & ForwardProps> = ({\n id: callId,\n startedAt,\n onHoldSince,\n slaConfig,\n participants,\n onPauseToggle,\n muted,\n onMuteToggle,\n onDTMFPress,\n onConsultAction,\n onConferenceAction,\n onTransferAction,\n onMergeCall,\n transferOptions\n}: CallProps & ForwardProps) => {\n const t = useI18n();\n const moreActionsButtonRef = useRef<HTMLButtonElement>(null);\n const inCallSince = startedAt instanceof Date ? startedAt.getUTCMilliseconds() : startedAt;\n\n const [popoverEl, setPopoverRef] = useElement<HTMLElement>();\n const [callDuration, setCallDuration] = useState(Date.now() - inCallSince);\n const [showConsultPopover, setShowConsultPopover] = useState(false);\n const [showConferencePopover, setShowConferencePopover] = useState(false);\n const [showTransferPopover, setShowTransferPopover] = useState(false);\n const [showSendDTMF, setShowSendDTMF] = useState(false);\n\n const { slaTimeout, slaDuration, currentSlaLevel } =\n Array.isArray(slaConfig) && slaConfig.length > 0 && callDuration !== undefined\n ? calculateSla(callDuration, slaConfig)\n : { slaTimeout: undefined, slaDuration: undefined, currentSlaLevel: undefined };\n\n const appendConferenceAction = (actionItems: Action[]) => {\n actionItems.splice(1, 0, {\n id: 'conference',\n text: t('call_panel_conference_call_menu_item'),\n onClick: () => setShowConferencePopover(true)\n });\n };\n\n const getActionItems = (item: CallParticipant): Action[] => {\n const actionItems = [\n {\n id: 'consult',\n text: t('call_panel_consult_call_menu_item'),\n onClick: () => setShowConsultPopover(true)\n },\n\n {\n id: 'transfer',\n text: t('call_panel_transfer_call_menu_item'),\n onClick: () => setShowTransferPopover(true)\n },\n {\n id: 'dtmf',\n text: t('call_panel_send_dtmf_menu_item'),\n onClick: () => setShowSendDTMF(true)\n },\n {\n id: 'hang_up',\n text: t('call_panel_hangup_call_menu_item'),\n disabled: !item.onEndCall,\n onClick: () => {\n if (item.onEndCall) item.onEndCall(callId, item.id);\n }\n }\n ];\n if (onConferenceAction) {\n appendConferenceAction(actionItems);\n }\n return actionItems;\n };\n\n useLayoutEffect(() => {\n setCallDuration(Date.now() - inCallSince);\n const timer = setInterval(() => {\n setCallDuration(Date.now() - inCallSince);\n }, 1000);\n return () => clearInterval(timer);\n }, [inCallSince]);\n\n useOuterEvent('mousedown', [popoverEl], () => {\n setShowConsultPopover(false);\n setShowTransferPopover(false);\n setShowConferencePopover(false);\n setShowSendDTMF(false);\n });\n\n const onKeyDown = ({ key }: KeyboardEvent) => {\n if (key === 'Escape') {\n setShowConsultPopover(false);\n setShowTransferPopover(false);\n setShowConferencePopover(false);\n setShowSendDTMF(false);\n }\n };\n\n useEffect(() => {\n document.addEventListener('keydown', onKeyDown);\n return () => {\n document.removeEventListener('keydown', onKeyDown);\n };\n }, [popoverEl]);\n\n let popoverContent;\n // eslint-disable-next-line default-case\n switch (true) {\n case showConsultPopover:\n popoverContent = (\n <CalleePicker\n heading={t('call_panel_consult_with_heading')}\n onClose={() => setShowConsultPopover(false)}\n onCall={phoneNumber => {\n onConsultAction?.(callId, phoneNumber);\n setShowConsultPopover(false);\n }}\n />\n );\n break;\n case showConferencePopover:\n popoverContent = (\n <CalleePicker\n heading={t('call_panel_conference_heading')}\n onClose={() => setShowConferencePopover(false)}\n onCall={phoneNumber => {\n onConferenceAction?.(callId, phoneNumber);\n setShowConferencePopover(false);\n }}\n />\n );\n break;\n case showTransferPopover:\n popoverContent = (\n <CallTransfer\n onClose={() => setShowTransferPopover(false)}\n onTransferCall={transferData => {\n onTransferAction?.(callId, transferData);\n setShowTransferPopover(false);\n }}\n transferOptions={transferOptions}\n />\n );\n break;\n case showSendDTMF:\n popoverContent = (\n <DTMFKeypad\n onClose={() => setShowSendDTMF(false)}\n onDialButtonClick={(key: number) => onDTMFPress?.(callId, String.fromCharCode(key))}\n />\n );\n break;\n }\n\n return (\n <StyledProgressContainer>\n <StyledSLAProgress\n determinate\n placement='local'\n slaDuration={slaDuration}\n slaLevel={currentSlaLevel}\n />\n {participants.map((item, index) => {\n return (\n <SummaryItem\n container={\n index === 0\n ? {\n areas: '\"primary secondary actions\"',\n cols: 'auto minmax(0, 2fr) auto'\n }\n : {\n areas: '\"visual primary secondary actions\"',\n cols: 'auto auto minmax(0, 2fr) auto'\n }\n }\n overflowStrategy='ellipsis'\n visual={index !== 0 && <Icon name='arrow-up' />}\n primary={item.name}\n secondary={item.info && <Text variant='secondary'>{item.info}</Text>}\n actions={\n <Flex container={{ wrap: 'nowrap' }}>\n {slaConfig && index === 0 && (\n <Flex container={{ alignItems: 'center' }}>\n <StopWatch startTime={startedAt} timeout={slaTimeout} />\n </Flex>\n )}\n {index === 0 && (\n <>\n <Button\n icon\n variant='simple'\n disabled={onHoldSince !== undefined}\n onClick={() => onMuteToggle(callId)}\n label={t(\n muted ? 'call_panel_unmute_mic_menu_item' : 'call_panel_mute_mic_menu_item'\n )}\n >\n <Icon name={muted ? 'mic-solid' : 'mic-off-solid'} />\n </Button>\n <Button\n icon\n variant='simple'\n onClick={() => onPauseToggle(callId)}\n label={t(\n onHoldSince !== undefined\n ? 'call_panel_resume_call_menu_item'\n : 'call_panel_pause_call_menu_item'\n )}\n >\n <Icon name={onHoldSince !== undefined ? 'play-solid' : 'pause-solid'} />\n </Button>\n </>\n )}\n {index === 0 && slaConfig && (\n <Actions ref={moreActionsButtonRef} items={getActionItems(item)} />\n )}\n\n {onMergeCall && (\n <Button\n icon\n variant='simple'\n key='merge'\n onClick={() => onMergeCall(callId)}\n label={t('call_panel_merge_call_menu_item')}\n >\n <Icon name='phone-split-solid' />\n </Button>\n )}\n\n {(!slaConfig \|\| index !== 0) && (\n <Button\n icon\n variant='simple'\n key='hang_up'\n onClick={() => {\n if (item.onEndCall) item.onEndCall(callId, item.id);\n }}\n label={t('call_panel_hangup_call_menu_item')}\n >\n <Icon name='phone-hangup-solid' />\n </Button>\n )}\n </Flex>\n }\n />\n );\n })}\n {onHoldSince !== undefined && (\n <Status as={StyledHoldInfo} variant='pending'>\n {t(\n 'call_panel_call_on_hold',\n (<StopWatch startTime={onHoldSince} />) as unknown as string\n )}\n </Status>\n )}\n\n <Popover\n target={moreActionsButtonRef.current}\n ref={setPopoverRef}\n placement='top-end'\n show={showConsultPopover \|\| showTransferPopover \|\| showSendDTMF \|\| showConferencePopover}\n >\n {popoverContent}\n </Popover>\n </StyledProgressContainer>\n );\n};\n\nexport default Call;\n"]}
1	+ {"version":3,"file":"Call.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/Call.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, useEffect, useLayoutEffect, useRef, useState } from 'react';\n\nimport {\n Action,\n Actions,\n Button,\n Flex,\n ForwardProps,\n Icon,\n Popover,\n Status,\n SummaryItem,\n Text,\n useElement,\n useI18n,\n useOuterEvent\n} from '@pega/cosmos-react-core';\n\nimport {\n StyledHoldInfo,\n StyledProgressContainer,\n StyledSLAProgress\n} from './CallControlPanel.styles';\nimport { CallParticipant, CallProps } from './CallControlPanel.types';\nimport CalleePicker from './CalleePicker';\nimport CallTransfer from './CallTransfer';\nimport DTMFKeypad from './DTMFKeypad';\nimport StopWatch from './StopWatch';\nimport { calculateSla } from './utils';\n\nconst Call: FunctionComponent<CallProps & ForwardProps> = ({\n id: callId,\n startedAt,\n onHoldSince,\n slaConfig,\n participants,\n onPauseToggle,\n muted,\n onMuteToggle,\n onDTMFPress,\n onConsultAction,\n onConferenceAction,\n onTransferAction,\n onMergeCall,\n transferOptions\n}: CallProps & ForwardProps) => {\n const t = useI18n();\n const moreActionsButtonRef = useRef<HTMLButtonElement>(null);\n const inCallSince = startedAt instanceof Date ? startedAt.getUTCMilliseconds() : startedAt;\n const [popoverEl, setPopoverRef] = useElement<HTMLElement>();\n const [slaLevel, setSlaLevel] = useState<number \| undefined>(undefined);\n const [showConsultPopover, setShowConsultPopover] = useState(false);\n const [showConferencePopover, setShowConferencePopover] = useState(false);\n const [showTransferPopover, setShowTransferPopover] = useState(false);\n const [showSendDTMF, setShowSendDTMF] = useState(false);\n const { slaTimeout, slaDuration } = calculateSla(Date.now() - inCallSince, slaConfig);\n\n const appendConferenceAction = (actionItems: Action[]) => {\n actionItems.splice(1, 0, {\n id: 'conference',\n text: t('call_panel_conference_call_menu_item'),\n onClick: () => setShowConferencePopover(true)\n });\n };\n\n const calculateCurrentSlaLevel = (): void => {\n const { currentSlaLevel } = calculateSla(Date.now() - inCallSince, slaConfig);\n setSlaLevel(currentSlaLevel);\n };\n\n const getActionItems = (item: CallParticipant): Action[] => {\n const actionItems = [\n {\n id: 'consult',\n text: t('call_panel_consult_call_menu_item'),\n onClick: () => setShowConsultPopover(true)\n },\n\n {\n id: 'transfer',\n text: t('call_panel_transfer_call_menu_item'),\n onClick: () => setShowTransferPopover(true)\n },\n {\n id: 'dtmf',\n text: t('call_panel_send_dtmf_menu_item'),\n onClick: () => setShowSendDTMF(true)\n },\n {\n id: 'hang_up',\n text: t('call_panel_hangup_call_menu_item'),\n disabled: !item.onEndCall,\n onClick: () => {\n if (item.onEndCall) item.onEndCall(callId, item.id);\n }\n }\n ];\n if (onConferenceAction) {\n appendConferenceAction(actionItems);\n }\n return actionItems;\n };\n\n useLayoutEffect(() => {\n calculateCurrentSlaLevel();\n const slaDurationInMillis = slaDuration && slaDuration * 1000;\n\n const timer = setTimeout(() => {\n calculateCurrentSlaLevel();\n }, slaDurationInMillis);\n\n return () => clearTimeout(timer);\n }, [inCallSince, slaLevel]);\n\n useOuterEvent('mousedown', [popoverEl], () => {\n setShowConsultPopover(false);\n setShowTransferPopover(false);\n setShowConferencePopover(false);\n setShowSendDTMF(false);\n });\n\n const onKeyDown = ({ key }: KeyboardEvent) => {\n if (key === 'Escape') {\n setShowConsultPopover(false);\n setShowTransferPopover(false);\n setShowConferencePopover(false);\n setShowSendDTMF(false);\n }\n };\n\n useEffect(() => {\n document.addEventListener('keydown', onKeyDown);\n return () => {\n document.removeEventListener('keydown', onKeyDown);\n };\n }, [popoverEl]);\n\n let popoverContent;\n // eslint-disable-next-line default-case\n switch (true) {\n case showConsultPopover:\n popoverContent = (\n <CalleePicker\n heading={t('call_panel_consult_with_heading')}\n onClose={() => setShowConsultPopover(false)}\n onCall={phoneNumber => {\n onConsultAction?.(callId, phoneNumber);\n setShowConsultPopover(false);\n }}\n />\n );\n break;\n case showConferencePopover:\n popoverContent = (\n <CalleePicker\n heading={t('call_panel_conference_heading')}\n onClose={() => setShowConferencePopover(false)}\n onCall={phoneNumber => {\n onConferenceAction?.(callId, phoneNumber);\n setShowConferencePopover(false);\n }}\n />\n );\n break;\n case showTransferPopover:\n popoverContent = (\n <CallTransfer\n onClose={() => setShowTransferPopover(false)}\n onTransferCall={transferData => {\n onTransferAction?.(callId, transferData);\n setShowTransferPopover(false);\n }}\n transferOptions={transferOptions}\n />\n );\n break;\n case showSendDTMF:\n popoverContent = (\n <DTMFKeypad\n onClose={() => setShowSendDTMF(false)}\n onDialButtonClick={(key: number) => onDTMFPress?.(callId, String.fromCharCode(key))}\n />\n );\n break;\n }\n\n return (\n <StyledProgressContainer>\n <StyledSLAProgress\n determinate\n placement='local'\n slaDuration={slaDuration}\n slaLevel={slaLevel}\n />\n {participants.map((item, index) => {\n return (\n <SummaryItem\n container={\n index === 0\n ? {\n areas: '\"primary secondary actions\"',\n cols: 'auto minmax(0, 2fr) auto'\n }\n : {\n areas: '\"visual primary secondary actions\"',\n cols: 'auto auto minmax(0, 2fr) auto'\n }\n }\n overflowStrategy='ellipsis'\n visual={index !== 0 && <Icon name='arrow-up' />}\n primary={item.name}\n secondary={item.info && <Text variant='secondary'>{item.info}</Text>}\n key={item.id}\n actions={\n <Flex container={{ wrap: 'nowrap' }}>\n {slaConfig && index === 0 && (\n <Flex container={{ alignItems: 'center' }}>\n <StopWatch startTime={startedAt} timeout={slaTimeout} />\n </Flex>\n )}\n {index === 0 && (\n <>\n <Button\n icon\n variant='simple'\n disabled={onHoldSince !== undefined}\n onClick={() => onMuteToggle(callId)}\n label={t(\n muted ? 'call_panel_unmute_mic_menu_item' : 'call_panel_mute_mic_menu_item'\n )}\n >\n <Icon name={muted ? 'mic-solid' : 'mic-off-solid'} />\n </Button>\n <Button\n icon\n variant='simple'\n onClick={() => onPauseToggle(callId)}\n label={t(\n onHoldSince !== undefined\n ? 'call_panel_resume_call_menu_item'\n : 'call_panel_pause_call_menu_item'\n )}\n >\n <Icon name={onHoldSince !== undefined ? 'play-solid' : 'pause-solid'} />\n </Button>\n </>\n )}\n {index === 0 && slaConfig && (\n <Actions ref={moreActionsButtonRef} items={getActionItems(item)} />\n )}\n\n {onMergeCall && (\n <Button\n icon\n variant='simple'\n key='merge'\n onClick={() => onMergeCall(callId)}\n label={t('call_panel_merge_call_menu_item')}\n >\n <Icon name='phone-split-solid' />\n </Button>\n )}\n\n {(!slaConfig \|\| index !== 0) && (\n <Button\n icon\n variant='simple'\n key='hang_up'\n onClick={() => {\n if (item.onEndCall) item.onEndCall(callId, item.id);\n }}\n label={t('call_panel_hangup_call_menu_item')}\n >\n <Icon name='phone-hangup-solid' />\n </Button>\n )}\n </Flex>\n }\n />\n );\n })}\n {onHoldSince !== undefined && (\n <Status as={StyledHoldInfo} variant='pending'>\n {t(\n 'call_panel_call_on_hold',\n (<StopWatch startTime={onHoldSince} />) as unknown as string\n )}\n </Status>\n )}\n\n <Popover\n target={moreActionsButtonRef.current}\n ref={setPopoverRef}\n placement='top-end'\n show={showConsultPopover \|\| showTransferPopover \|\| showSendDTMF \|\| showConferencePopover}\n >\n {popoverContent}\n </Popover>\n </StyledProgressContainer>\n );\n};\n\nexport default Call;\n"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CallControlPanel.d.ts","sourceRoot":"","sources":["../../../src/components/CallControlPanel/CallControlPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,iBAAiB,~~EAMlB~~,MAAM,OAAO,CAAC;AAEf,OAAO,EAYL,YAAY,~~EAEb~~,MAAM,yBAAyB,CAAC;AAGjC,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;~~AAMtE~~,QAAA,MAAM,gBAAgB,EAAE,iBAAiB,CAAC,qBAAqB,GAAG,YAAY,~~CAwI7E~~,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
1	+ {"version":3,"file":"CallControlPanel.d.ts","sourceRoot":"","sources":["../../../src/components/CallControlPanel/CallControlPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,iBAAiB,EAOlB,MAAM,OAAO,CAAC;AAEf,OAAO,EAYL,YAAY,EAGb,MAAM,yBAAyB,CAAC;AAGjC,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AAWtE,QAAA,MAAM,gBAAgB,EAAE,iBAAiB,CAAC,qBAAqB,GAAG,YAAY,CAgJ7E,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

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

@@ -1,18 +1,24 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useEffect, useMemo, useRef, useState } from 'react';
-import { CardHeader, CardContent, Button, useI18n, Icon, Flex, ComboBox, Text, Popover, useOuterEvent, useElement, useConsolidatedRef } from '@pega/cosmos-react-core';
+import { CardHeader, CardContent, Button, useI18n, Icon, Flex, ComboBox, Text, Popover, useOuterEvent, useElement, useConsolidatedRef, useDraggable } from '@pega/cosmos-react-core';
 import CalleePicker, { ContactsContext } from './CalleePicker';
 import Call from './Call';
 import StopWatch from './StopWatch';
 import { StyledCallControlPanel, StyledStatusRow } from './CallControlPanel.styles';
 import { UserStatusIcon } from './CallControlPanelIcon';
-const CallControlPanel = forwardRef(({ heading, status, statusOptions, onStatusChange, inStatusSince, message, calls, onAddCall, contactsList, onFavoriteToggle, ...restProps }, ref) => {
+const resetPopoverToDefaultPosition = (containerRef) => {
+    if (containerRef && containerRef.current)
+        containerRef.current.style.transform = `translate(0px, 0px)`;
+};
+const CallControlPanel = forwardRef(({ heading, status, statusOptions, onStatusChange, inStatusSince, message, draggable = false, calls, onAddCall, contactsList, onFavoriteToggle, ...restProps }, ref) => {
     const t = useI18n();
     const addButtonRef = useRef(null);
     const [showPopover, setShowPopover] = useState(false);
     const [collapsed, setCollapsed] = useState(false);
     const containerRef = useConsolidatedRef(ref);
     const [popoverEl, setPopoverRef] = useElement();
+    const dragRef = useRef(null);
+    useDraggable(containerRef, dragRef);
     const actionItems = useMemo(() => {
         return statusOptions.map(({ id, label }) => {
             return { id, primary: label, selected: id === status };
@@ -36,9 +42,12 @@ const CallControlPanel = forwardRef(({ heading, status, statusOptions, onStatusC
     return (_jsx(ContactsContext.Provider, Object.assign({ value: {
             contacts: contactsList,
             onFavoriteToggle
-        } }, { children: _jsxs(StyledCallControlPanel, Object.assign({ ref: containerRef }, restProps, { isCollapsed: collapsed, style: { '--headerHeight': `${headerHeight}px` } }, { children: [_jsx(CardHeader, Object.assign({ actions: _jsxs(_Fragment, { children: [_jsx(Button, Object.assign({ icon: true, variant: 'simple', "aria-label": t('call_panel_make_new_call'), ref: addButtonRef, onClick: () => {
+        } }, { children: _jsxs(StyledCallControlPanel, Object.assign({ ref: containerRef }, restProps, { isCollapsed: collapsed, isDraggable: draggable, style: { '--headerHeight': `${headerHeight}px` } }, { children: [_jsx(CardHeader, Object.assign({ ref: !collapsed && draggable ? dragRef : undefined, actions: _jsxs(_Fragment, { children: [_jsx(Button, Object.assign({ icon: true, variant: 'simple', "aria-label": t('call_panel_make_new_call'), ref: addButtonRef, onClick: () => {
                                     setShowPopover(true);
-                                } }, { children: _jsx(Icon, { name: 'plus' }, void 0) }), 'new-call'), _jsx(Button, Object.assign({ icon: true, variant: 'simple', "aria-label": t(collapsed ? 'expand_noun' : 'collapse_noun'), onClick: () => setCollapsed(state => !state) }, { children: _jsx(Icon, { name: 'caret-down' }, void 0) }), 'expand-collapse')] }, void 0) }, { children: _jsxs(Flex, Object.assign({ container: { alignItems: 'center', itemGap: 1 } }, { children: [_jsx(Icon, { name: 'phone-solid' }, void 0), _jsx(Text, Object.assign({ variant: 'h3' }, { children: heading }), void 0)] }), void 0) }), void 0), _jsxs(CardContent, Object.assign({ container: { itemGap: 2 } }, { children: [_jsxs(Flex, Object.assign({ as: StyledStatusRow, container: { alignItems: 'start', itemGap: 1 } }, { children: [_jsx(UserStatusIcon, { variant: 'dot', status: selectedStatusOption?.status }, void 0), _jsx(Flex, Object.assign({ item: { grow: 1 } }, { children: _jsx(ComboBox, { label: t('call_panel_agent_status'), labelHidden: true, selected: {
+                                } }, { children: _jsx(Icon, { name: 'plus' }, void 0) }), 'new-call'), _jsx(Button, Object.assign({ icon: true, variant: 'simple', "aria-label": t(collapsed ? 'expand_noun' : 'collapse_noun'), onClick: () => {
+                                    resetPopoverToDefaultPosition(containerRef);
+                                    setCollapsed(state => !state);
+                                } }, { children: _jsx(Icon, { name: 'caret-down' }, void 0) }), 'expand-collapse')] }, void 0) }, { children: _jsxs(Flex, Object.assign({ container: { alignItems: 'center', itemGap: 1 } }, { children: [_jsx(Icon, { name: 'phone-solid' }, void 0), _jsx(Text, Object.assign({ variant: 'h3' }, { children: heading }), void 0)] }), void 0) }), void 0), _jsxs(CardContent, Object.assign({ container: { itemGap: 2 } }, { children: [_jsxs(Flex, Object.assign({ as: StyledStatusRow, container: { alignItems: 'start', itemGap: 1 } }, { children: [_jsx(UserStatusIcon, { variant: 'dot', status: selectedStatusOption?.status }, void 0), _jsx(Flex, Object.assign({ item: { grow: 1 } }, { children: _jsx(ComboBox, { label: t('call_panel_agent_status'), labelHidden: true, selected: {
                                             items: {
                                                 id: status,
                                                 text: selectedStatusOption?.label || ''
@@ -46,7 +55,7 @@ const CallControlPanel = forwardRef(({ heading, status, statusOptions, onStatusC
                                         }, menu: {
                                             items: actionItems,
                                             onItemClick: id => onStatusChange(id)
-                                        }, info: message }, void 0) }), void 0), _jsx(StopWatch, { startTime: inStatusSince }, void 0)] }), void 0), calls.map(callProps => (_jsx(Call, Object.assign({}, callProps), void 0)))] }), void 0), showPopover && (_jsx(Popover, Object.assign({ target: addButtonRef.current, ref: setPopoverRef, placement: 'top-end' }, { children: _jsx(CalleePicker, { heading: t('call_panel_new_call_heading'), onClose: () => setShowPopover(false), onCall: phoneNumber => {
+                                        }, info: message }, void 0) }), void 0), _jsx(StopWatch, { startTime: inStatusSince }, void 0)] }), void 0), calls.map(callProps => (_jsx(Call, Object.assign({}, callProps), callProps.id)))] }), void 0), showPopover && (_jsx(Popover, Object.assign({ target: addButtonRef.current, ref: setPopoverRef, placement: 'top-end' }, { children: _jsx(CalleePicker, { heading: t('call_panel_new_call_heading'), onClose: () => setShowPopover(false), onCall: phoneNumber => {
                             onAddCall(phoneNumber);
                             setShowPopover(false);
                         } }, void 0) }), void 0))] }), void 0) }), void 0));

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CallControlPanel.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/CallControlPanel.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n CSSProperties,\n forwardRef,\n FunctionComponent,\n PropsWithoutRef,\n useEffect,\n useMemo,\n useRef,\n useState\n} from 'react';\n\nimport {\n CardHeader,\n CardContent,\n Button,\n useI18n,\n Icon,\n Flex,\n ComboBox,\n Text,\n Popover,\n useOuterEvent,\n useElement,\n ForwardProps,\n useConsolidatedRef\n} from '@pega/cosmos-react-core';\n\nimport CalleePicker, { ContactsContext } from './CalleePicker';\nimport type { CallControlPanelProps } from './CallControlPanel.types';\nimport Call from './Call';\nimport StopWatch from './StopWatch';\nimport { StyledCallControlPanel, StyledStatusRow } from './CallControlPanel.styles';\nimport { UserStatusIcon } from './CallControlPanelIcon';\n\nconst CallControlPanel: FunctionComponent<CallControlPanelProps & ForwardProps> = forwardRef(\n (\n {\n heading,\n status,\n statusOptions,\n onStatusChange,\n inStatusSince,\n message,\n calls,\n onAddCall,\n contactsList,\n onFavoriteToggle,\n ...restProps\n }: PropsWithoutRef<CallControlPanelProps>,\n ref: CallControlPanelProps['ref']\n ) => {\n const t = useI18n();\n const addButtonRef = useRef<HTMLButtonElement>(null);\n const [showPopover, setShowPopover] = useState(false);\n const [collapsed, setCollapsed] = useState(false);\n const containerRef = useConsolidatedRef(ref);\n const [popoverEl, setPopoverRef] = useElement<HTMLElement>();\n\n const actionItems = useMemo(() => {\n return statusOptions.map(({ id, label }) => {\n return { id, primary: label, selected: id === status };\n });\n }, [status, statusOptions]);\n\n useOuterEvent('mousedown', [popoverEl], () => {\n setShowPopover(false);\n });\n\n const onKeyDown = ({ key }: KeyboardEvent) => {\n if (key === 'Escape') setShowPopover(false);\n };\n\n useEffect(() => {\n document.addEventListener('keydown', onKeyDown);\n return () => {\n document.removeEventListener('keydown', onKeyDown);\n };\n }, [popoverEl]);\n\n const headerHeight = containerRef.current?.querySelector('header')?.offsetHeight \|\| 0;\n\n const selectedStatusOption = statusOptions.find(s => s.id === status);\n\n return (\n <ContactsContext.Provider\n value={{\n contacts: contactsList,\n onFavoriteToggle\n }}\n >\n <StyledCallControlPanel\n ref={containerRef}\n {...restProps}\n isCollapsed={collapsed}\n style={{ '--headerHeight': `${headerHeight}px` } as CSSProperties}\n >\n <CardHeader\n actions={\n <>\n <Button\n icon\n variant='simple'\n key='new-call'\n aria-label={t('call_panel_make_new_call')}\n ref={addButtonRef}\n onClick={() => {\n setShowPopover(true);\n }}\n >\n <Icon name='plus' />\n </Button>\n <Button\n icon\n variant='simple'\n key='expand-collapse'\n aria-label={t(collapsed ? 'expand_noun' : 'collapse_noun')}\n onClick={() => setCollapsed(state => !state)}\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 container={{ itemGap: 2 }}>\n <Flex as={StyledStatusRow} container={{ alignItems: 'start', itemGap: 1 }}>\n <UserStatusIcon variant='dot' status={selectedStatusOption?.status} />\n <Flex item={{ grow: 1 }}>\n <ComboBox\n label={t('call_panel_agent_status')}\n labelHidden\n selected={{\n items: {\n id: status,\n text: selectedStatusOption?.label \|\| ''\n }\n }}\n menu={{\n items: actionItems,\n onItemClick: id => onStatusChange(id)\n }}\n info={message}\n />\n </Flex>\n <StopWatch startTime={inStatusSince} />\n </Flex>\n {calls.map(callProps => (\n <Call {...callProps} />\n ))}\n </CardContent>\n {showPopover && (\n <Popover target={addButtonRef.current} ref={setPopoverRef} placement='top-end'>\n <CalleePicker\n heading={t('call_panel_new_call_heading')}\n onClose={() => setShowPopover(false)}\n onCall={phoneNumber => {\n onAddCall(phoneNumber);\n setShowPopover(false);\n }}\n />\n </Popover>\n )}\n </StyledCallControlPanel>\n </ContactsContext.Provider>\n );\n }\n);\n\nexport default CallControlPanel;\n"]}
1	+ {"version":3,"file":"CallControlPanel.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/CallControlPanel.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n CSSProperties,\n forwardRef,\n FunctionComponent,\n PropsWithoutRef,\n RefObject,\n useEffect,\n useMemo,\n useRef,\n useState\n} from 'react';\n\nimport {\n CardHeader,\n CardContent,\n Button,\n useI18n,\n Icon,\n Flex,\n ComboBox,\n Text,\n Popover,\n useOuterEvent,\n useElement,\n ForwardProps,\n useConsolidatedRef,\n useDraggable\n} from '@pega/cosmos-react-core';\n\nimport CalleePicker, { ContactsContext } from './CalleePicker';\nimport type { CallControlPanelProps } from './CallControlPanel.types';\nimport Call from './Call';\nimport StopWatch from './StopWatch';\nimport { StyledCallControlPanel, StyledStatusRow } from './CallControlPanel.styles';\nimport { UserStatusIcon } from './CallControlPanelIcon';\n\nconst resetPopoverToDefaultPosition = (containerRef: RefObject<HTMLDivElement>): void => {\n if (containerRef && containerRef.current)\n containerRef.current.style.transform = `translate(0px, 0px)`;\n};\n\nconst CallControlPanel: FunctionComponent<CallControlPanelProps & ForwardProps> = forwardRef(\n (\n {\n heading,\n status,\n statusOptions,\n onStatusChange,\n inStatusSince,\n message,\n draggable = false,\n calls,\n onAddCall,\n contactsList,\n onFavoriteToggle,\n ...restProps\n }: PropsWithoutRef<CallControlPanelProps>,\n ref: CallControlPanelProps['ref']\n ) => {\n const t = useI18n();\n const addButtonRef = useRef<HTMLButtonElement>(null);\n const [showPopover, setShowPopover] = useState(false);\n const [collapsed, setCollapsed] = useState(false);\n const containerRef = useConsolidatedRef(ref);\n const [popoverEl, setPopoverRef] = useElement<HTMLElement>();\n const dragRef = useRef<HTMLDivElement>(null);\n useDraggable(containerRef, dragRef);\n\n const actionItems = useMemo(() => {\n return statusOptions.map(({ id, label }) => {\n return { id, primary: label, selected: id === status };\n });\n }, [status, statusOptions]);\n\n useOuterEvent('mousedown', [popoverEl], () => {\n setShowPopover(false);\n });\n\n const onKeyDown = ({ key }: KeyboardEvent) => {\n if (key === 'Escape') setShowPopover(false);\n };\n\n useEffect(() => {\n document.addEventListener('keydown', onKeyDown);\n return () => {\n document.removeEventListener('keydown', onKeyDown);\n };\n }, [popoverEl]);\n\n const headerHeight = containerRef.current?.querySelector('header')?.offsetHeight \|\| 0;\n\n const selectedStatusOption = statusOptions.find(s => s.id === status);\n\n return (\n <ContactsContext.Provider\n value={{\n contacts: contactsList,\n onFavoriteToggle\n }}\n >\n <StyledCallControlPanel\n ref={containerRef}\n {...restProps}\n isCollapsed={collapsed}\n isDraggable={draggable}\n style={{ '--headerHeight': `${headerHeight}px` } as CSSProperties}\n >\n <CardHeader\n ref={!collapsed && draggable ? dragRef : undefined}\n actions={\n <>\n <Button\n icon\n variant='simple'\n key='new-call'\n aria-label={t('call_panel_make_new_call')}\n ref={addButtonRef}\n onClick={() => {\n setShowPopover(true);\n }}\n >\n <Icon name='plus' />\n </Button>\n <Button\n icon\n variant='simple'\n key='expand-collapse'\n aria-label={t(collapsed ? 'expand_noun' : 'collapse_noun')}\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 container={{ itemGap: 2 }}>\n <Flex as={StyledStatusRow} container={{ alignItems: 'start', itemGap: 1 }}>\n <UserStatusIcon variant='dot' status={selectedStatusOption?.status} />\n <Flex item={{ grow: 1 }}>\n <ComboBox\n label={t('call_panel_agent_status')}\n labelHidden\n selected={{\n items: {\n id: status,\n text: selectedStatusOption?.label \|\| ''\n }\n }}\n menu={{\n items: actionItems,\n onItemClick: id => onStatusChange(id)\n }}\n info={message}\n />\n </Flex>\n <StopWatch startTime={inStatusSince} />\n </Flex>\n {calls.map(callProps => (\n <Call key={callProps.id} {...callProps} />\n ))}\n </CardContent>\n {showPopover && (\n <Popover target={addButtonRef.current} ref={setPopoverRef} placement='top-end'>\n <CalleePicker\n heading={t('call_panel_new_call_heading')}\n onClose={() => setShowPopover(false)}\n onCall={phoneNumber => {\n onAddCall(phoneNumber);\n setShowPopover(false);\n }}\n />\n </Popover>\n )}\n </StyledCallControlPanel>\n </ContactsContext.Provider>\n );\n }\n);\n\nexport default CallControlPanel;\n"]}

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

@@ -10,5 +10,6 @@ export declare const StyledSLAProgress: import("styled-components").StyledCompon
 }, never>;
 export declare const StyledCallControlPanel: import("styled-components").StyledComponent<"article", import("styled-components").DefaultTheme, Partial<import("@pega/cosmos-react-core").CardProps> & {
     isCollapsed: boolean;
+    isDraggable?: boolean | undefined;
 }, never>;
 //# sourceMappingURL=CallControlPanel.styles.d.ts.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CallControlPanel.styles.d.ts","sourceRoot":"","sources":["../../../src/components/CallControlPanel/CallControlPanel.styles.ts"],"names":[],"mappings":"AAEA,OAAO,EAQL,aAAa,EAKd,MAAM,yBAAyB,CAAC;AAMjC,eAAO,MAAM,uBAAuB,yGAoCnC,CAAC;AAIF,eAAO,MAAM,cAAc,qJAI1B,CAAC;AAIF,eAAO,MAAM,eAAe,yGAiB3B,CAAC;AAIF,eAAO,MAAM,iBAAiB;;;;;SAwC5B,CAAC;AAIH,eAAO,MAAM,sBAAsB;~~iBAAqC~~,OAAO~~;SAsB9E~~,CAAC"}
1	+ {"version":3,"file":"CallControlPanel.styles.d.ts","sourceRoot":"","sources":["../../../src/components/CallControlPanel/CallControlPanel.styles.ts"],"names":[],"mappings":"AAEA,OAAO,EAQL,aAAa,EAKd,MAAM,yBAAyB,CAAC;AAMjC,eAAO,MAAM,uBAAuB,yGAoCnC,CAAC;AAIF,eAAO,MAAM,cAAc,qJAI1B,CAAC;AAIF,eAAO,MAAM,eAAe,yGAiB3B,CAAC;AAIF,eAAO,MAAM,iBAAiB;;;;;SAwC5B,CAAC;AAIH,eAAO,MAAM,sBAAsB;iBACpB,OAAO;;SA6BpB,CAAC"}

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

@@ -86,26 +86,33 @@ export const StyledSLAProgress = styled(StyledProgressBar)(({ theme, slaDuration
   `;
 });
 StyledSLAProgress.defaultProps = defaultThemeProp;
-export const StyledCallControlPanel = styled(StyledCard)(({ theme, isCollapsed }) => {
+export const StyledCallControlPanel = styled(StyledCard)(({ theme, isCollapsed, isDraggable }) => {
     return css `
-      position: fixed;
-      z-index: ${theme.base['z-index'].popover};
-      width: 25rem;
-      inset-inline-end: calc(2 * ${theme.base.spacing});
-      bottom: calc(2 * ${theme.base.spacing});
-      box-shadow: ${theme.base.shadow.high};
-      transition: transform calc(4 * ${theme.base.animation.speed})
-        ${theme.base.animation.timing.ease};
-      ${isCollapsed &&
+    position: fixed;
+    z-index: ${theme.base['z-index'].modal};
+    width: 25rem;
+    inset-inline-end: calc(2 * ${theme.base.spacing});
+    bottom: calc(2 * ${theme.base.spacing});
+    box-shadow: ${theme.base.shadow.high};
+    ${isCollapsed &&
+        css `
+      transform: translateY(
+        calc(100% - var(--headerHeight) + calc(2 * ${theme.base.spacing}))
+      ) !important;
+    `}
+    ${StyledCardHeader} {
+      ${!isCollapsed &&
+        isDraggable &&
         css `
-        transform: translateY(calc(100% - var(--headerHeight) + calc(2 * ${theme.base.spacing})));
+        cursor: all-scroll;
       `}
-      ${StyledCardHeader} ${StyledButton}:last-child {
-        transition: transform calc(2 * ${theme.base.animation.speed})
-          ${theme.base.animation.timing.ease};
-        transform: ${isCollapsed ? 'rotate(-180deg)' : 'rotate(0)'};
-      }
-    `;
+    }
+    ${StyledCardHeader} ${StyledButton}:last-child {
+      transition: transform calc(2 * ${theme.base.animation.speed})
+        ${theme.base.animation.timing.ease};
+      transform: ${isCollapsed ? 'rotate(-180deg)' : 'rotate(0)'};
+    }
+  `;
 });
 StyledCallControlPanel.defaultProps = defaultThemeProp;
 //# sourceMappingURL=CallControlPanel.styles.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CallControlPanel.styles.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/CallControlPanel.styles.ts"],"names":[],"mappings":"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~~CACtD~~,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,EAAE,EAAE;~~IACzB~~,OAAO,GAAG,CAAA;;~~iBAEG~~,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,~~OAAO~~;;~~mCAEX~~,KAAK,CAAC,IAAI,CAAC,OAAO;~~yBAC5B~~,KAAK,CAAC,IAAI,CAAC,OAAO;~~oBACvB~~,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI;~~uCACH~~,~~KAAK~~,~~CAAC~~,~~IAAI~~,~~CAAC,SAAS,CAAC,~~KAAK~~;UACvD~~,~~KAAK,~~CAAC,IAAI,CAAC,~~SAAS~~,~~CAAC~~,~~MAAM,~~CAAC,~~IAAI~~;~~QAClC~~,WAAW;~~QACb~~,GAAG,CAAA~~;2EACkE~~,~~KAAK,CAAC,IAAI,CAAC,OAAO;OACtF;QACC,~~gBAAgB,IAAI,YAAY;~~yCACC~~,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK;~~YACvD~~,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI;~~qBACvB~~,WAAW,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,WAAW;;~~KAE7D~~,CAAC;AACJ,CAAC,~~CACF~~,CAAC;~~AAEF~~,sBAAsB,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport {\n defaultThemeProp,\n StyledBackdrop,\n StyledButton,\n StyledFlex,\n StyledProgressBar,\n StyledSummaryItemActions,\n StyledVisual,\n ProgressProps,\n StyledSummaryItem,\n StyledCard,\n StyledPrimary,\n StyledSecondary\n} from '@pega/cosmos-react-core';\nimport { StyledStatus } from '@pega/cosmos-react-core/lib/components/Badges/Status';\nimport { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';\n\nimport { StyledStopWatch } from './StopWatch';\n\nexport const StyledProgressContainer = styled.div(\n ({\n theme: {\n base: { spacing },\n components: { card }\n }\n }) => {\n return css`\n position: relative;\n > ${StyledBackdrop} {\n z-index: 0;\n }\n\n ${StyledSummaryItemActions} ${StyledFlex} + ${StyledButton} {\n margin-inline-start: ${spacing};\n }\n\n > ${StyledSummaryItem} {\n box-sizing: content-box;\n position: relative;\n height: 2rem;\n padding: 0 1rem;\n border-top: 0;\n > ${StyledVisual} {\n transform: rotate(50deg);\n }\n > ${StyledPrimary}, > ${StyledSecondary} {\n align-self: center;\n }\n }\n\n > ${StyledSummaryItem} ~ ${StyledSummaryItem} {\n border-top: 0.125rem solid ${card.background};\n }\n `;\n }\n);\n\nStyledSummaryItemActions.defaultProps = defaultThemeProp;\n\nexport const StyledHoldInfo = styled(StyledStatus)`\n position: absolute;\n top: 0;\n transform: translateY(-50%);\n`;\n\nStyledHoldInfo.defaultProps = defaultThemeProp;\n\nexport const StyledStatusRow = styled.div(\n ({\n theme: {\n components: {\n input: { height }\n }\n }\n }) => {\n return css`\n > * {\n min-height: ${height};\n }\n > ${StyledStopWatch} {\n line-height: ${height};\n }\n `;\n }\n);\n\nStyledStatusRow.defaultProps = defaultThemeProp;\n\nexport const StyledSLAProgress = styled(StyledProgressBar)<\n ProgressProps & { slaDuration?: number; slaLevel?: number }\n>(({ theme, slaDuration = 0, slaLevel }) => {\n const {\n base: { colors }\n } = theme;\n\n const { bgColor = colors.red['extra-light'], fgColor = colors.red.light } =\n slaLevel !== undefined\n ? [\n { bgColor: colors.green['extra-light'], fgColor: colors.green.light },\n { bgColor: colors.orange['extra-light'], fgColor: colors.orange.light },\n { bgColor: colors.red['extra-light'], fgColor: colors.red.light }\n ][slaLevel]\n : { bgColor: colors.slate.light, fgColor: colors.slate.light };\n\n return css`\n position: absolute;\n width: 100%;\n height: 100%;\n background-color: ${bgColor};\n border-radius: calc(0.5 * ${theme.base['border-radius']});\n\n /* Fancy way to restart the animation by changing it's name. /\n @keyframes FillIn-${slaLevel} {\n 0% {\n transform: translateX(-100%);\n }\n\n 100% {\n transform: translateX(0);\n }\n }\n\n &::before {\n background-color: ${fgColor};\n border-radius: 0;\n animation: FillIn-${slaLevel} ${slaDuration}s linear;\n }\n `;\n});\n\nStyledSLAProgress.defaultProps = defaultThemeProp;\n\nexport const StyledCallControlPanel = styled(StyledCard)<{ isCollapsed: boolean }>(\n ({ theme, isCollapsed }) => {\n return css`\n position: fixed;\n z-index: ${theme.base['z-index'].~~popover~~};\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 transition: transform calc(4 * ${~~theme.base.animation.speed})\n ${theme.base.animation.timing.ease};\n ${~~isCollapsed &&\n css`\n transform: translateY(calc(100% - var(--headerHeight) + calc(2 * ${theme.base.spacing})));\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);\n\nStyledCallControlPanel.defaultProps = defaultThemeProp;\n"]}
1	+ {"version":3,"file":"CallControlPanel.styles.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/CallControlPanel.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport {\n defaultThemeProp,\n StyledBackdrop,\n StyledButton,\n StyledFlex,\n StyledProgressBar,\n StyledSummaryItemActions,\n StyledVisual,\n ProgressProps,\n StyledSummaryItem,\n StyledCard,\n StyledPrimary,\n StyledSecondary\n} from '@pega/cosmos-react-core';\nimport { StyledStatus } from '@pega/cosmos-react-core/lib/components/Badges/Status';\nimport { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';\n\nimport { StyledStopWatch } from './StopWatch';\n\nexport const StyledProgressContainer = styled.div(\n ({\n theme: {\n base: { spacing },\n components: { card }\n }\n }) => {\n return css`\n position: relative;\n > ${StyledBackdrop} {\n z-index: 0;\n }\n\n ${StyledSummaryItemActions} ${StyledFlex} + ${StyledButton} {\n margin-inline-start: ${spacing};\n }\n\n > ${StyledSummaryItem} {\n box-sizing: content-box;\n position: relative;\n height: 2rem;\n padding: 0 1rem;\n border-top: 0;\n > ${StyledVisual} {\n transform: rotate(50deg);\n }\n > ${StyledPrimary}, > ${StyledSecondary} {\n align-self: center;\n }\n }\n\n > ${StyledSummaryItem} ~ ${StyledSummaryItem} {\n border-top: 0.125rem solid ${card.background};\n }\n `;\n }\n);\n\nStyledSummaryItemActions.defaultProps = defaultThemeProp;\n\nexport const StyledHoldInfo = styled(StyledStatus)`\n position: absolute;\n top: 0;\n transform: translateY(-50%);\n`;\n\nStyledHoldInfo.defaultProps = defaultThemeProp;\n\nexport const StyledStatusRow = styled.div(\n ({\n theme: {\n components: {\n input: { height }\n }\n }\n }) => {\n return css`\n > * {\n min-height: ${height};\n }\n > ${StyledStopWatch} {\n line-height: ${height};\n }\n `;\n }\n);\n\nStyledStatusRow.defaultProps = defaultThemeProp;\n\nexport const StyledSLAProgress = styled(StyledProgressBar)<\n ProgressProps & { slaDuration?: number; slaLevel?: number }\n>(({ theme, slaDuration = 0, slaLevel }) => {\n const {\n base: { colors }\n } = theme;\n\n const { bgColor = colors.red['extra-light'], fgColor = colors.red.light } =\n slaLevel !== undefined\n ? [\n { bgColor: colors.green['extra-light'], fgColor: colors.green.light },\n { bgColor: colors.orange['extra-light'], fgColor: colors.orange.light },\n { bgColor: colors.red['extra-light'], fgColor: colors.red.light }\n ][slaLevel]\n : { bgColor: colors.slate.light, fgColor: colors.slate.light };\n\n return css`\n position: absolute;\n width: 100%;\n height: 100%;\n background-color: ${bgColor};\n border-radius: calc(0.5 * ${theme.base['border-radius']});\n\n /* Fancy way to restart the animation by changing it's name. /\n @keyframes FillIn-${slaLevel} {\n 0% {\n transform: translateX(-100%);\n }\n\n 100% {\n transform: translateX(0);\n }\n }\n\n &::before {\n background-color: ${fgColor};\n border-radius: 0;\n animation: FillIn-${slaLevel} ${slaDuration}s linear;\n }\n `;\n});\n\nStyledSLAProgress.defaultProps = defaultThemeProp;\n\nexport const StyledCallControlPanel = styled(StyledCard)<{\n isCollapsed: boolean;\n isDraggable?: boolean;\n}>(({ theme, isCollapsed, isDraggable }) => {\n return css`\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\nStyledCallControlPanel.defaultProps = defaultThemeProp;\n"]}

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

@@ -81,6 +81,8 @@ export interface CallControlPanelProps extends BaseProps, NoChildrenProp {
     status: UserAvailabilityStatusOption['id'];
     /** Timestamp since the user is in the current status. */
     inStatusSince: number | Date;
+    /** If true, the component will be draggable */
+    draggable?: boolean;
     /**
      * Region for messages: errors, notifications, etc.
      */

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CallControlPanel.types.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/CallControlPanel.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ReactNode, Ref } from 'react';\n\nimport { BaseProps, NoChildrenProp } from '@pega/cosmos-react-core';\n\nexport type Contact = {\n /** Contact phone number /\n phoneNumber: string;\n /* Contact name /\n primary: string;\n /* Additional contact information /\n secondary: string;\n /* Determines if contact is favorite /\n favorite: boolean;\n};\n\nexport interface CallParticipant {\n /* Caller id. /\n id: string;\n /* Caller's name. /\n name: string;\n /* Additional caller's info. /\n info?: string;\n /* Callback fired when the user ends the call. /\n onEndCall?: (id: CallProps['id'], participantId: CallParticipant['id']) => void;\n}\n\nexport interface TransferReasonOption {\n readonly id: string;\n readonly label: string;\n}\n\nexport type TransferData = {\n reason: TransferReasonOption['id'];\n comments: string;\n interaction: boolean;\n phoneNumber: string;\n};\n\nexport interface CallProps {\n /* Call identifier. /\n id: string;\n /* Timestamp when the call has begun. /\n startedAt: number \| Date;\n /* Timestamp when the call has been put on hold. /\n onHoldSince?: number \| Date;\n /* SLA configuration timeups. Array of numbers of seconds after which the particular SLA level\n * time is up.\n /\n slaConfig?: number[];\n /* Call participants. /\n participants: CallParticipant[];\n /* The flag whether the mic is muted on this call. /\n muted?: boolean;\n /* Callback fired when 'pause' icon has been clicked. /\n onPauseToggle: (id: CallProps['id']) => void;\n /* Callback fired when 'mute' icon has been clicked. /\n onMuteToggle: (id: CallProps['id']) => void;\n /* Callback fired when 'Consult' action has been clicked. /\n onConsultAction?: (id: CallProps['id'], phoneNumber: string) => void;\n /* Callback fired when 'Conference' action has been clicked. /\n onConferenceAction?: (id: CallProps['id'], phoneNumber: string) => void;\n /* Callback fired when 'Merge call' action has been chosen. /\n onMergeCall?: (id: CallProps['id']) => void;\n /* Callback fired for every dial pad key press. /\n onDTMFPress?: (id: CallProps['id'], key: string) => void;\n /* Callback fired when 'Transfer' action has been clicked. /\n onTransferAction?: (id: CallProps['id'], transferData: TransferData) => void;\n /\n Transfer reason options\n /\n transferOptions: Readonly<TransferReasonOption[]>;\n}\n\nexport type UserAvailabilityStatus = 'offline' \| 'available' \| 'busy' \| 'away' \| 'not_available';\n\nexport interface UserAvailabilityStatusOption {\n readonly id: string;\n readonly label: string;\n readonly status: UserAvailabilityStatus;\n}\n\nexport interface CallControlPanelProps extends BaseProps, NoChildrenProp {\n /* The heading rendered. /\n heading: string;\n /\n User availability statuses.\n /\n statusOptions: Readonly<UserAvailabilityStatusOption[]>;\n /* User current status. /\n status: UserAvailabilityStatusOption['id'];\n /* Timestamp since the user is in the current status. /\n inStatusSince: number \| Date;\n /\n Region for messages: errors, notifications, etc.\n /\n message?: ReactNode;\n /\n Callback fired when user changes their status.\n * @param value new chosen status.\n /\n onStatusChange: (value: UserAvailabilityStatusOption['id']) => void;\n /\n List of current calls. Having two or more not declared as \"on hold\" (onHoldSince defined) means there's\n * a conference call.\n /\n calls: CallProps[];\n /\n Callback fired on new call made by the user.\n * @param phoneNumber the number chosen.\n /\n onAddCall: (phoneNumber: string) => void;\n /* An array of contacts objects. /\n contactsList: Contact[];\n /* Callback fired on adding/removing contact to/from favorites /\n onFavoriteToggle: (phoneNumber: string, favorite: boolean) => void;\n /* Reference to the root component. */\n ref?: Ref<HTMLDivElement>;\n}\n"]}
1	+ {"version":3,"file":"CallControlPanel.types.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/CallControlPanel.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ReactNode, Ref } from 'react';\n\nimport { BaseProps, NoChildrenProp } from '@pega/cosmos-react-core';\n\nexport type Contact = {\n /** Contact phone number /\n phoneNumber: string;\n /* Contact name /\n primary: string;\n /* Additional contact information /\n secondary: string;\n /* Determines if contact is favorite /\n favorite: boolean;\n};\n\nexport interface CallParticipant {\n /* Caller id. /\n id: string;\n /* Caller's name. /\n name: string;\n /* Additional caller's info. /\n info?: string;\n /* Callback fired when the user ends the call. /\n onEndCall?: (id: CallProps['id'], participantId: CallParticipant['id']) => void;\n}\n\nexport interface TransferReasonOption {\n readonly id: string;\n readonly label: string;\n}\n\nexport type TransferData = {\n reason: TransferReasonOption['id'];\n comments: string;\n interaction: boolean;\n phoneNumber: string;\n};\n\nexport interface CallProps {\n /* Call identifier. /\n id: string;\n /* Timestamp when the call has begun. /\n startedAt: number \| Date;\n /* Timestamp when the call has been put on hold. /\n onHoldSince?: number \| Date;\n /* SLA configuration timeups. Array of numbers of seconds after which the particular SLA level\n * time is up.\n /\n slaConfig?: number[];\n /* Call participants. /\n participants: CallParticipant[];\n /* The flag whether the mic is muted on this call. /\n muted?: boolean;\n /* Callback fired when 'pause' icon has been clicked. /\n onPauseToggle: (id: CallProps['id']) => void;\n /* Callback fired when 'mute' icon has been clicked. /\n onMuteToggle: (id: CallProps['id']) => void;\n /* Callback fired when 'Consult' action has been clicked. /\n onConsultAction?: (id: CallProps['id'], phoneNumber: string) => void;\n /* Callback fired when 'Conference' action has been clicked. /\n onConferenceAction?: (id: CallProps['id'], phoneNumber: string) => void;\n /* Callback fired when 'Merge call' action has been chosen. /\n onMergeCall?: (id: CallProps['id']) => void;\n /* Callback fired for every dial pad key press. /\n onDTMFPress?: (id: CallProps['id'], key: string) => void;\n /* Callback fired when 'Transfer' action has been clicked. /\n onTransferAction?: (id: CallProps['id'], transferData: TransferData) => void;\n /\n Transfer reason options\n /\n transferOptions: Readonly<TransferReasonOption[]>;\n}\n\nexport type UserAvailabilityStatus = 'offline' \| 'available' \| 'busy' \| 'away' \| 'not_available';\n\nexport interface UserAvailabilityStatusOption {\n readonly id: string;\n readonly label: string;\n readonly status: UserAvailabilityStatus;\n}\n\nexport interface CallControlPanelProps extends BaseProps, NoChildrenProp {\n /* The heading rendered. /\n heading: string;\n /\n User availability statuses.\n /\n statusOptions: Readonly<UserAvailabilityStatusOption[]>;\n /* User current status. /\n status: UserAvailabilityStatusOption['id'];\n /* Timestamp since the user is in the current status. /\n inStatusSince: number \| Date;\n /* If true, the component will be draggable /\n draggable?: boolean;\n /\n Region for messages: errors, notifications, etc.\n /\n message?: ReactNode;\n /\n Callback fired when user changes their status.\n * @param value new chosen status.\n /\n onStatusChange: (value: UserAvailabilityStatusOption['id']) => void;\n /\n List of current calls. Having two or more not declared as \"on hold\" (onHoldSince defined) means there's\n * a conference call.\n /\n calls: CallProps[];\n /\n Callback fired on new call made by the user.\n * @param phoneNumber the number chosen.\n /\n onAddCall: (phoneNumber: string) => void;\n /* An array of contacts objects. /\n contactsList: Contact[];\n /* Callback fired on adding/removing contact to/from favorites /\n onFavoriteToggle: (phoneNumber: string, favorite: boolean) => void;\n /* Reference to the root component. */\n ref?: Ref<HTMLDivElement>;\n}\n"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CallControlPanelIcon.d.ts","sourceRoot":"","sources":["../../../src/components/CallControlPanel/CallControlPanelIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAQ,MAAM,OAAO,CAAC;AAChD,OAAe,EAAO,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAG9D,OAAO,EAEL,YAAY,EAEZ,cAAc,EAKf,MAAM,yBAAyB,CAAC;AAGjC,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAKvE,UAAU,yBAA0B,SAAQ,cAAc;IACxD,MAAM,CAAC,EAAE,sBAAsB,CAAC;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,OAAO,CAAC;CACvB;AAED,UAAU,mBAAoB,SAAQ,IAAI,CAAC,yBAAyB,EAAE,QAAQ,CAAC;IAC7E,OAAO,EAAE,MAAM,GAAG,KAAK,CAAC;CACzB;AA2DD,eAAO,MAAM,0BAA0B;gBAzCW,sBAAsB;SAmDvE,CAAC;AAIF,eAAO,MAAM,cAAc,EAAE,iBAAiB,CAAC,mBAAmB,CA6BjE,CAAC;AAEF,QAAA,MAAM,oBAAoB,EAAE,iBAAiB,CAAC,yBAAyB,GAAG,YAAY,~~CAmBrF~~,CAAC;AAEF,eAAe,oBAAoB,CAAC"}
1	+ {"version":3,"file":"CallControlPanelIcon.d.ts","sourceRoot":"","sources":["../../../src/components/CallControlPanel/CallControlPanelIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAQ,MAAM,OAAO,CAAC;AAChD,OAAe,EAAO,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAG9D,OAAO,EAEL,YAAY,EAEZ,cAAc,EAKf,MAAM,yBAAyB,CAAC;AAGjC,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAKvE,UAAU,yBAA0B,SAAQ,cAAc;IACxD,MAAM,CAAC,EAAE,sBAAsB,CAAC;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,OAAO,CAAC;CACvB;AAED,UAAU,mBAAoB,SAAQ,IAAI,CAAC,yBAAyB,EAAE,QAAQ,CAAC;IAC7E,OAAO,EAAE,MAAM,GAAG,KAAK,CAAC;CACzB;AA2DD,eAAO,MAAM,0BAA0B;gBAzCW,sBAAsB;SAmDvE,CAAC;AAIF,eAAO,MAAM,cAAc,EAAE,iBAAiB,CAAC,mBAAmB,CA6BjE,CAAC;AAEF,QAAA,MAAM,oBAAoB,EAAE,iBAAiB,CAAC,yBAAyB,GAAG,YAAY,CAkBrF,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

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

@@ -52,7 +52,7 @@ export const StyledCallControlPanelIcon = styled(StyledStatusIcon) `
     z-index: 1;
     width: 0.875rem;
     height: 0.875rem;
-    fill: ${p => p.theme.base.colors.gray.dark};
+    fill: ${p => p.theme.base.colors.gray.medium};
   }
 `;
 StyledCallControlPanelIcon.defaultProps = defaultThemeProp;
@@ -65,7 +65,7 @@ export const UserStatusIcon = memo(({ status = 'offline', variant }) => {
 });
 const CallControlPanelIcon = memo(({ status = 'offline', label, panelVisible, ...restProps }) => {
     const iconName = iconMapping[status];
-    return (_jsxs(StyledCallControlPanelIcon, Object.assign({ as: StyledAvatar }, restProps, { size: 'm', userStatus: status, title: label, "aria-label": label }, { children: [_jsx(Icon, { name: 'headset' }, void 0), iconName && _jsx(UserStatusIcon, { variant: 'icon', status: status }, void 0), !panelVisible && _jsx(Icon, { name: 'eye-off-solid' }, void 0)] }), void 0));
+    return (_jsxs(StyledCallControlPanelIcon, Object.assign({ as: StyledAvatar }, restProps, { size: 'm', userStatus: status, "aria-label": label }, { children: [_jsx(Icon, { name: 'headset' }, void 0), iconName && _jsx(UserStatusIcon, { variant: 'icon', status: status }, void 0), !panelVisible && _jsx(Icon, { name: 'eye-off-solid' }, void 0)] }), void 0));
 });
 export default CallControlPanelIcon;
 //# sourceMappingURL=CallControlPanelIcon.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CallControlPanelIcon.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/CallControlPanelIcon.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAqB,IAAI,EAAE,MAAM,OAAO,CAAC;AAChD,OAAO,MAAM,EAAE,EAAE,GAAG,EAAgB,MAAM,mBAAmB,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAEzC,OAAO,EACL,gBAAgB,EAEhB,IAAI,EAGJ,YAAY,EACZ,UAAU,EACV,QAAQ,EACT,MAAM,yBAAyB,CAAC;AAkBjC,MAAM,YAAY,GAAyE;IACzF,OAAO,EAAE,aAAa;IACtB,SAAS,EAAE,aAAa;IACxB,IAAI,EAAE,YAAY;IAClB,IAAI,EAAE,cAAc;IACpB,aAAa,EAAE,aAAa;CAC7B,CAAC;AAEF,MAAM,WAAW,GAA0D;IACzE,OAAO,EAAE,OAAO;IAChB,SAAS,EAAE,SAAS;IACpB,IAAI,EAAE,OAAO;IACb,IAAI,EAAE,OAAO;IACb,aAAa,EAAE,OAAO;CACvB,CAAC;AAEF,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CACjC,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,MAAM,EAAE,EACjB,EACD,UAAU,EACX,EAAE,EAAE;IACH,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,YAAY,CAAC,UAAU,CAAC,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC,CAGtE,CAAC;IACF,MAAM,OAAO,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC,YAAY,CAAC,CAAC;IAChD,MAAM,OAAO,GAAG,aAAa,CAAC,OAAO,CAAC,CAAC;IACvC,OAAO,GAAG,CAAA;0BACY,OAAO;eAClB,OAAO;KACjB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,oBAAoB,GAAG,MAAM,CAAC,gBAAgB,CAAC,CAAA;;;;;;;;;;IAUjD,UAAU;;;;;CAKb,CAAC;AAEF,oBAAoB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAErD,MAAM,CAAC,MAAM,0BAA0B,GAAG,MAAM,CAAC,gBAAgB,CAAC,CAAA;MAC5D,UAAU;;;;;;;YAOJ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,~~IAAI~~;;~~CAE7C~~,CAAC;AAEF,0BAA0B,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3D,MAAM,CAAC,MAAM,cAAc,GAA2C,IAAI,CACxE,CAAC,EAAE,MAAM,GAAG,SAAS,EAAE,OAAO,EAAE,EAAE,EAAE;IAClC,MAAM,EACJ,IAAI,EAAE,EAAE,MAAM,EAAE,EACjB,GAAG,QAAQ,EAAE,CAAC;IACf,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,YAAY,CAAC,MAAM,CAAC,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC,CAGlE,CAAC;IACF,MAAM,OAAO,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC,YAAY,CAAC,CAAC;IAChD,MAAM,QAAQ,GAAG,WAAW,CAAC,MAAM,CAAC,CAAC;IAErC,OAAO,OAAO,KAAK,KAAK,CAAC,CAAC,CAAC,CACzB,4BACE,IAAI,EAAC,KAAK,uBAEV,MAAM,EAAC,MAAM,EACb,KAAK,EAAC,MAAM,EACZ,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,4BAA4B,gBAElC,iBAAQ,EAAE,EAAC,KAAK,EAAC,EAAE,EAAC,KAAK,EAAC,CAAC,EAAC,KAAK,EAAC,IAAI,EAAE,OAAO,WAAI,YAC/C,CACP,CAAC,CAAC,CAAC,CACF,KAAC,gBAAgB,kBAAC,EAAE,EAAE,oBAAoB,EAAE,UAAU,EAAE,MAAM,gBAC3D,QAAQ,IAAI,KAAC,IAAI,IAAC,IAAI,EAAE,QAAQ,WAAI,YACpB,CACpB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,oBAAoB,GAAgE,IAAI,CAC5F,CAAC,EAAE,MAAM,GAAG,SAAS,EAAE,KAAK,EAAE,YAAY,EAAE,GAAG,SAAS,EAAE,EAAE,EAAE;IAC5D,MAAM,QAAQ,GAAG,WAAW,CAAC,MAAM,CAAC,CAAC;IAErC,OAAO,CACL,MAAC,0BAA0B,kBACzB,EAAE,EAAE,YAAY,IACZ,SAAS,IACb,IAAI,EAAC,GAAG,EACR,UAAU,EAAE,MAAM,~~EAClB~~,KAAK,~~EAAE,KAAK,gBACA,KAAK,~~iBAEjB,KAAC,IAAI,IAAC,IAAI,EAAC,SAAS,WAAG,EACtB,QAAQ,IAAI,KAAC,cAAc,IAAC,OAAO,EAAC,MAAM,EAAC,MAAM,EAAE,MAAM,WAAI,EAC7D,CAAC,YAAY,IAAI,KAAC,IAAI,IAAC,IAAI,EAAC,eAAe,WAAG,aACpB,CAC9B,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,oBAAoB,CAAC","sourcesContent":["import { FunctionComponent, memo } from 'react';\nimport styled, { css, DefaultTheme } from 'styled-components';\nimport { readableColor } from 'polished';\n\nimport {\n defaultThemeProp,\n ForwardProps,\n Icon,\n NoChildrenProp,\n OmitStrict,\n StyledAvatar,\n StyledIcon,\n useTheme\n} from '@pega/cosmos-react-core';\nimport { IconNames } from '@pega/cosmos-react-core/lib/components/Icon/iconNames';\n\nimport type { UserAvailabilityStatus } from './CallControlPanel.types';\n\ntype ThemeColor = keyof OmitStrict<DefaultTheme['base']['colors'], 'white' \| 'black'>;\ntype ThemeColorVariant = 'extra-light' \| 'light' \| 'medium' \| 'dark' \| 'extra-dark';\n\ninterface CallControlPanelIconProps extends NoChildrenProp {\n status?: UserAvailabilityStatus;\n label: string;\n panelVisible: boolean;\n}\n\ninterface UserStatusIconProps extends Pick<CallControlPanelIconProps, 'status'> {\n variant: 'icon' \| 'dot';\n}\n\nconst colorMapping: Record<UserAvailabilityStatus, `${ThemeColor}-${ThemeColorVariant}`> = {\n offline: 'slate-light',\n available: 'green-light',\n busy: 'red-medium',\n away: 'orange-light',\n not_available: 'slate-light'\n};\n\nconst iconMapping: Record<UserAvailabilityStatus, IconNames \| undefined> = {\n offline: 'times',\n available: undefined,\n busy: 'minus',\n away: 'clock',\n not_available: 'reset'\n};\n\nconst StyledStatusIcon = styled.div<{ userStatus: UserAvailabilityStatus }>(\n ({\n theme: {\n base: { colors }\n },\n userStatus\n }) => {\n const [colorName, colorVariant] = colorMapping[userStatus].split('-', 2) as [\n ThemeColor,\n ThemeColorVariant\n ];\n const bgColor = colors[colorName][colorVariant];\n const fgColor = readableColor(bgColor);\n return css`\n background-color: ${bgColor};\n color: ${fgColor};\n `;\n }\n);\n\nStyledStatusIcon.defaultProps = defaultThemeProp;\n\nconst StyledUserStatusIcon = styled(StyledStatusIcon)`\n position: absolute;\n inset-block-start: -0.25rem;\n inset-inline-end: -0.25rem;\n z-index: 1;\n width: 0.875rem;\n height: 0.875rem;\n border-radius: 50%;\n border: 0.0625rem solid black;\n\n ${StyledIcon} {\n display: block;\n width: 100%;\n margin: 0 auto;\n }\n`;\n\nStyledUserStatusIcon.defaultProps = defaultThemeProp;\n\nexport const StyledCallControlPanelIcon = styled(StyledStatusIcon)`\n > ${StyledIcon}:nth-child(3) {\n position: absolute;\n inset-block-end: -0.25rem;\n inset-inline-end: -0.25rem;\n z-index: 1;\n width: 0.875rem;\n height: 0.875rem;\n fill: ${p => p.theme.base.colors.gray.~~dark~~};\n }\n`;\n\nStyledCallControlPanelIcon.defaultProps = defaultThemeProp;\n\nexport const UserStatusIcon: FunctionComponent<UserStatusIconProps> = memo(\n ({ status = 'offline', variant }) => {\n const {\n base: { colors }\n } = useTheme();\n const [colorName, colorVariant] = colorMapping[status].split('-', 2) as [\n ThemeColor,\n ThemeColorVariant\n ];\n const bgColor = colors[colorName][colorVariant];\n const iconName = iconMapping[status];\n\n return variant === 'dot' ? (\n <svg\n role='img'\n aria-hidden\n height='1rem'\n width='1rem'\n viewBox='0 0 10 10'\n xmlns='http://www.w3.org/2000/svg'\n >\n <circle cx='50%' cy='50%' r='50%' fill={bgColor} />\n </svg>\n ) : (\n <StyledStatusIcon as={StyledUserStatusIcon} userStatus={status}>\n {iconName && <Icon name={iconName} />}\n </StyledStatusIcon>\n );\n }\n);\n\nconst CallControlPanelIcon: FunctionComponent<CallControlPanelIconProps & ForwardProps> = memo(\n ({ status = 'offline', label, panelVisible, ...restProps }) => {\n const iconName = iconMapping[status];\n\n return (\n <StyledCallControlPanelIcon\n as={StyledAvatar}\n {...restProps}\n size='m'\n userStatus={status}\n ~~title={label}\n~~ aria-label={label}\n >\n <Icon name='headset' />\n {iconName && <UserStatusIcon variant='icon' status={status} />}\n {!panelVisible && <Icon name='eye-off-solid' />}\n </StyledCallControlPanelIcon>\n );\n }\n);\n\nexport default CallControlPanelIcon;\n"]}
1	+ {"version":3,"file":"CallControlPanelIcon.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/CallControlPanelIcon.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, memo } from 'react';\nimport styled, { css, DefaultTheme } from 'styled-components';\nimport { readableColor } from 'polished';\n\nimport {\n defaultThemeProp,\n ForwardProps,\n Icon,\n NoChildrenProp,\n OmitStrict,\n StyledAvatar,\n StyledIcon,\n useTheme\n} from '@pega/cosmos-react-core';\nimport { IconNames } from '@pega/cosmos-react-core/lib/components/Icon/iconNames';\n\nimport type { UserAvailabilityStatus } from './CallControlPanel.types';\n\ntype ThemeColor = keyof OmitStrict<DefaultTheme['base']['colors'], 'white' \| 'black'>;\ntype ThemeColorVariant = 'extra-light' \| 'light' \| 'medium' \| 'dark' \| 'extra-dark';\n\ninterface CallControlPanelIconProps extends NoChildrenProp {\n status?: UserAvailabilityStatus;\n label: string;\n panelVisible: boolean;\n}\n\ninterface UserStatusIconProps extends Pick<CallControlPanelIconProps, 'status'> {\n variant: 'icon' \| 'dot';\n}\n\nconst colorMapping: Record<UserAvailabilityStatus, `${ThemeColor}-${ThemeColorVariant}`> = {\n offline: 'slate-light',\n available: 'green-light',\n busy: 'red-medium',\n away: 'orange-light',\n not_available: 'slate-light'\n};\n\nconst iconMapping: Record<UserAvailabilityStatus, IconNames \| undefined> = {\n offline: 'times',\n available: undefined,\n busy: 'minus',\n away: 'clock',\n not_available: 'reset'\n};\n\nconst StyledStatusIcon = styled.div<{ userStatus: UserAvailabilityStatus }>(\n ({\n theme: {\n base: { colors }\n },\n userStatus\n }) => {\n const [colorName, colorVariant] = colorMapping[userStatus].split('-', 2) as [\n ThemeColor,\n ThemeColorVariant\n ];\n const bgColor = colors[colorName][colorVariant];\n const fgColor = readableColor(bgColor);\n return css`\n background-color: ${bgColor};\n color: ${fgColor};\n `;\n }\n);\n\nStyledStatusIcon.defaultProps = defaultThemeProp;\n\nconst StyledUserStatusIcon = styled(StyledStatusIcon)`\n position: absolute;\n inset-block-start: -0.25rem;\n inset-inline-end: -0.25rem;\n z-index: 1;\n width: 0.875rem;\n height: 0.875rem;\n border-radius: 50%;\n border: 0.0625rem solid black;\n\n ${StyledIcon} {\n display: block;\n width: 100%;\n margin: 0 auto;\n }\n`;\n\nStyledUserStatusIcon.defaultProps = defaultThemeProp;\n\nexport const StyledCallControlPanelIcon = styled(StyledStatusIcon)`\n > ${StyledIcon}:nth-child(3) {\n position: absolute;\n inset-block-end: -0.25rem;\n inset-inline-end: -0.25rem;\n z-index: 1;\n width: 0.875rem;\n height: 0.875rem;\n fill: ${p => p.theme.base.colors.gray.medium};\n }\n`;\n\nStyledCallControlPanelIcon.defaultProps = defaultThemeProp;\n\nexport const UserStatusIcon: FunctionComponent<UserStatusIconProps> = memo(\n ({ status = 'offline', variant }) => {\n const {\n base: { colors }\n } = useTheme();\n const [colorName, colorVariant] = colorMapping[status].split('-', 2) as [\n ThemeColor,\n ThemeColorVariant\n ];\n const bgColor = colors[colorName][colorVariant];\n const iconName = iconMapping[status];\n\n return variant === 'dot' ? (\n <svg\n role='img'\n aria-hidden\n height='1rem'\n width='1rem'\n viewBox='0 0 10 10'\n xmlns='http://www.w3.org/2000/svg'\n >\n <circle cx='50%' cy='50%' r='50%' fill={bgColor} />\n </svg>\n ) : (\n <StyledStatusIcon as={StyledUserStatusIcon} userStatus={status}>\n {iconName && <Icon name={iconName} />}\n </StyledStatusIcon>\n );\n }\n);\n\nconst CallControlPanelIcon: FunctionComponent<CallControlPanelIconProps & ForwardProps> = memo(\n ({ status = 'offline', label, panelVisible, ...restProps }) => {\n const iconName = iconMapping[status];\n\n return (\n <StyledCallControlPanelIcon\n as={StyledAvatar}\n {...restProps}\n size='m'\n userStatus={status}\n aria-label={label}\n >\n <Icon name='headset' />\n {iconName && <UserStatusIcon variant='icon' status={status} />}\n {!panelVisible && <Icon name='eye-off-solid' />}\n </StyledCallControlPanelIcon>\n );\n }\n);\n\nexport default CallControlPanelIcon;\n"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ContactsList.d.ts","sourceRoot":"","sources":["../../../src/components/CallControlPanel/ContactsList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAGjB,GAAG,EAGJ,MAAM,OAAO,CAAC;AAGf,OAAO,EAGL,YAAY,EAYb,MAAM,yBAAyB,CAAC;AAGjC,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AAExD,MAAM,WAAW,iBAAiB;IAChC,oCAAoC;IACpC,QAAQ,EAAE,OAAO,EAAE,CAAC;IACpB;;;OAGG;IACH,MAAM,EAAE;QACN,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,EAAE,MAAM,CAAC;QACb,QAAQ,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;KACzC,CAAC;IACF,kEAAkE;IAClE,gBAAgB,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IACpE,uCAAuC;IACvC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;~~AAmCD~~,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,GAAG,YAAY,CAkFrE,CAAC;AAEF,eAAe,YAAY,CAAC"}
1	+ {"version":3,"file":"ContactsList.d.ts","sourceRoot":"","sources":["../../../src/components/CallControlPanel/ContactsList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAGjB,GAAG,EAGJ,MAAM,OAAO,CAAC;AAGf,OAAO,EAGL,YAAY,EAYb,MAAM,yBAAyB,CAAC;AAGjC,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AAExD,MAAM,WAAW,iBAAiB;IAChC,oCAAoC;IACpC,QAAQ,EAAE,OAAO,EAAE,CAAC;IACpB;;;OAGG;IACH,MAAM,EAAE;QACN,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,EAAE,MAAM,CAAC;QACb,QAAQ,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;KACzC,CAAC;IACF,kEAAkE;IAClE,gBAAgB,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IACpE,uCAAuC;IACvC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAoCD,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,GAAG,YAAY,CAkFrE,CAAC;AAEF,eAAe,YAAY,CAAC"}

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

@@ -8,11 +8,12 @@ const StyledContactsList = styled.div(({ theme: { base } }) => {
     display: flex;
     flex-flow: column;
     height: 100%;
+    overflow-y: auto;
+    overflow-x: hidden;
     ${StyledCard} {
       margin: 0 calc(${base.spacing} * -2);
       padding: 0 calc(${base.spacing} * 2);
-      overflow: auto;
       > ${StyledCardContent} {
         padding: 0;