@pega/cosmos-react-cs 3.0.0-dev.2.0 → 3.0.0-dev.21.0

package/lib/components/CallControlPanel/Call.js

@@ -1,74 +1,32 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useLayoutEffect, useRef, useState } from 'react';
-import { Actions, Button, Flex, Icon, registerIcon, Popover, Status, SummaryItem, Text, useElement, useI18n, useOuterEvent } from '@pega/cosmos-react-core';
+import { useLayoutEffect, useRef, useState } from 'react';
+import { Actions, Button, Flex, Icon, registerIcon, Popover, Status, SummaryItem, Text, useElement, useI18n, useOuterEvent, useEscape, Card, CardHeader, CardContent } from '@pega/cosmos-react-core';
 import * as arrowUpIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/arrow-up.icon';
 import * as micSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/mic-solid.icon';
 import * as micOffSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/mic-off-solid.icon';
 import * as playSoldIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/play-solid.icon';
 import * as pauseSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/pause-solid.icon';
 import * as phoneSplitSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/phone-split-solid.icon';
+import * as phoneOutSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/phone-out-solid.icon';
 import * as phoneHangupSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/phone-hangup-solid.icon';
+import DialPad from '../DialPad';
 import { StyledHoldInfo, StyledProgressContainer, StyledSLAProgress } from './CallControlPanel.styles';
-import CalleePicker from './CalleePicker';
-import CallTransfer from './CallTransfer';
-import DTMFKeypad from './DTMFKeypad';
+import CallHandoverForm from './CallHandoverForm';
 import StopWatch from './StopWatch';
 import { calculateSla } from './utils';
-registerIcon(arrowUpIcon, micSolidIcon, micOffSolidIcon, playSoldIcon, pauseSolidIcon, phoneSplitSolidIcon, phoneHangupSolidIcon);
-const Call = ({ id: callId, startedAt, onHoldSince, slaConfig, participants, onPauseToggle, muted, onMuteToggle, onDTMFPress, onConsultAction, onConferenceAction, onTransferAction, onMergeCall, transferOptions }) => {
+registerIcon(arrowUpIcon, micSolidIcon, micOffSolidIcon, playSoldIcon, pauseSolidIcon, phoneSplitSolidIcon, phoneOutSolidIcon, phoneHangupSolidIcon);
+const Call = ({ id: callId, startedAt, onHoldSince, slaConfig, participants, onPauseToggle, muted, onMuteToggle, onDTMFPress, onConsultAction, onConferenceAction, onTransferAction, onMergeCall, onHandOffCall, onEndCall, transferOptions }) => {
     const t = useI18n();
     const moreActionsButtonRef = useRef(null);
     const inCallSince = startedAt instanceof Date ? startedAt.getUTCMilliseconds() : startedAt;
     const [popoverEl, setPopoverRef] = useElement();
     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 [showPopover, setShowPopover] = useState(null);
     const { slaTimeout, slaDuration } = calculateSla(Date.now() - inCallSince, slaConfig);
-    const appendConferenceAction = (actionItems) => {
-        actionItems.splice(1, 0, {
-            id: 'conference',
-            text: t('call_panel_conference_call_menu_item'),
-            onClick: () => setShowConferencePopover(true)
-        });
-    };
     const calculateCurrentSlaLevel = () => {
         const { currentSlaLevel } = calculateSla(Date.now() - inCallSince, slaConfig);
         setSlaLevel(currentSlaLevel);
     };
-    const getActionItems = (item) => {
-        const actionItems = [
-            {
-                id: 'consult',
-                text: t('call_panel_consult_call_menu_item'),
-                onClick: () => setShowConsultPopover(true)
-            },
-            {
-                id: 'transfer',
-                text: t('call_panel_transfer_call_menu_item'),
-                onClick: () => setShowTransferPopover(true)
-            },
-            {
-                id: 'dtmf',
-                text: t('call_panel_send_dtmf_menu_item'),
-                onClick: () => setShowSendDTMF(true)
-            },
-            {
-                id: 'hang_up',
-                text: t('call_panel_hangup_call_menu_item'),
-                disabled: !item.onEndCall,
-                onClick: () => {
-                    if (item.onEndCall)
-                        item.onEndCall(callId, item.id);
-                }
-            }
-        ];
-        if (onConferenceAction) {
-            appendConferenceAction(actionItems);
-        }
-        return actionItems;
-    };
     useLayoutEffect(() => {
         calculateCurrentSlaLevel();
         const slaDurationInMillis = slaDuration && slaDuration * 1000;
@@ -77,49 +35,41 @@ const Call = ({ id: callId, startedAt, onHoldSince, slaConfig, participants, onP
         }, slaDurationInMillis);
         return () => clearTimeout(timer);
     }, [inCallSince, slaLevel]);
-    useOuterEvent('mousedown', [popoverEl], () => {
-        setShowConsultPopover(false);
-        setShowTransferPopover(false);
-        setShowConferencePopover(false);
-        setShowSendDTMF(false);
-    });
-    const onKeyDown = ({ key }) => {
-        if (key === 'Escape') {
-            setShowConsultPopover(false);
-            setShowTransferPopover(false);
-            setShowConferencePopover(false);
-            setShowSendDTMF(false);
-        }
-    };
-    useEffect(() => {
-        document.addEventListener('keydown', onKeyDown);
-        return () => {
-            document.removeEventListener('keydown', onKeyDown);
-        };
-    }, [popoverEl]);
-    let popoverContent = null;
-    if (showConsultPopover) {
-        popoverContent = (_jsx(CalleePicker, { heading: t('call_panel_consult_with_heading'), onClose: () => setShowConsultPopover(false), onCall: phoneNumber => {
-                onConsultAction?.(callId, phoneNumber);
-                setShowConsultPopover(false);
-            } }, void 0));
-    }
-    else if (showConferencePopover) {
-        popoverContent = (_jsx(CalleePicker, { heading: t('call_panel_conference_heading'), onClose: () => setShowConferencePopover(false), onCall: phoneNumber => {
-                onConferenceAction?.(callId, phoneNumber);
-                setShowConferencePopover(false);
-            } }, void 0));
-    }
-    else if (showTransferPopover) {
-        popoverContent = (_jsx(CallTransfer, { onClose: () => setShowTransferPopover(false), onTransferCall: transferData => {
-                onTransferAction?.(callId, transferData);
-                setShowTransferPopover(false);
-            }, transferOptions: transferOptions }, void 0));
-    }
-    else if (showSendDTMF) {
-        popoverContent = (_jsx(DTMFKeypad, { onClose: () => setShowSendDTMF(false), onDialButtonClick: (key) => onDTMFPress?.(callId, String.fromCharCode(key)) }, void 0));
+    useOuterEvent('mousedown', [popoverEl], () => setShowPopover(null));
+    useEscape(() => setShowPopover(null), popoverEl);
+    let popoverContent;
+    let popoverHeading;
+    switch (showPopover) {
+        case 'consult':
+            popoverHeading = t('call_panel_consult_with_heading');
+            popoverContent = (_jsx(CallHandoverForm, { onCancel: () => setShowPopover(null), onSubmit: transferData => {
+                    onConsultAction?.(callId, transferData);
+                    setShowPopover(null);
+                }, transferOptions: transferOptions }));
+            break;
+        case 'conference':
+            popoverHeading = t('call_panel_conference_heading');
+            popoverContent = (_jsx(CallHandoverForm, { onCancel: () => setShowPopover(null), onSubmit: transferData => {
+                    onConferenceAction?.(callId, transferData);
+                    setShowPopover(null);
+                }, transferOptions: transferOptions }));
+            break;
+        case 'transfer':
+            popoverHeading = t('call_panel_transfer_call_heading');
+            popoverContent = (_jsx(CallHandoverForm, { onCancel: () => setShowPopover(null), onSubmit: transferData => {
+                    onTransferAction?.(callId, transferData);
+                    setShowPopover(null);
+                }, transferOptions: transferOptions }));
+            break;
+        case 'dtmf':
+            popoverHeading = t('call_panel_send_dtmf_heading');
+            popoverContent = (_jsx(DialPad, { onDialButtonClick: (key) => onDTMFPress?.(callId, String.fromCharCode(key)), mode: 'DTMF' }));
+            break;
+        default:
+            popoverHeading = '';
+            popoverContent = null;
     }
-    return (_jsxs(StyledProgressContainer, { children: [_jsx(StyledSLAProgress, { determinate: true, placement: 'local', slaDuration: slaDuration, slaLevel: slaLevel }, void 0), participants.map((item, index) => {
+    return (_jsxs(StyledProgressContainer, { children: [_jsx(StyledSLAProgress, { determinate: true, placement: 'local', slaDuration: slaDuration, slaLevel: slaLevel }), participants.map((item, index) => {
                 return (_jsx(SummaryItem, { container: index === 0
                         ? {
                             areas: '"primary secondary actions"',
@@ -128,15 +78,43 @@ const Call = ({ id: callId, startedAt, onHoldSince, slaConfig, participants, onP
                         : {
                             areas: '"visual primary secondary actions"',
                             cols: 'auto auto minmax(0, 2fr) auto'
-                        }, overflowStrategy: 'ellipsis', visual: index !== 0 && _jsx(Icon, { name: 'arrow-up' }, void 0), primary: item.name, secondary: item.info && _jsx(Text, { variant: 'secondary', children: item.info }, void 0), actions: _jsxs(Flex, { container: { wrap: 'nowrap' }, children: [slaConfig && index === 0 && (_jsx(Flex, { container: { alignItems: 'center' }, children: _jsx(StopWatch, { startTime: startedAt, timeout: slaTimeout }, void 0) }, void 0)), index === 0 && (_jsxs(_Fragment, { children: [_jsx(Button, { icon: true, variant: 'simple', disabled: onHoldSince !== undefined, onClick: () => onMuteToggle(callId), label: t(muted ? 'call_panel_unmute_mic_menu_item' : 'call_panel_mute_mic_menu_item'), children: _jsx(Icon, { name: muted ? 'mic-solid' : 'mic-off-solid' }, void 0) }, void 0), _jsx(Button, { icon: true, variant: 'simple', onClick: () => onPauseToggle(callId), label: t(onHoldSince !== undefined
-                                            ? 'call_panel_resume_call_menu_item'
-                                            : '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, { 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, { 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) }, item.id));
+                        }, overflowStrategy: 'ellipsis', visual: index !== 0 && _jsx(Icon, { name: 'arrow-up' }), primary: item.name, secondary: item.info && _jsx(Text, { variant: 'secondary', children: item.info }), actions: index === 0 ? (_jsxs(Flex, { container: { wrap: 'nowrap' }, children: [slaConfig && (_jsx(Flex, { container: { alignItems: 'center' }, children: _jsx(StopWatch, { startTime: startedAt, timeout: slaTimeout }) })), _jsx(Button, { icon: true, variant: 'simple', disabled: onHoldSince !== undefined, onClick: () => onMuteToggle(callId), label: t(muted ? 'call_panel_unmute_mic_menu_item' : 'call_panel_mute_mic_menu_item'), children: _jsx(Icon, { name: muted ? 'mic-solid' : 'mic-off-solid' }) }), _jsx(Button, { icon: true, variant: 'simple', disabled: !onPauseToggle, onClick: () => onPauseToggle?.(callId), label: t(onHoldSince !== undefined
+                                    ? 'call_panel_resume_call_menu_item'
+                                    : 'call_panel_pause_call_menu_item'), children: _jsx(Icon, { name: onHoldSince !== undefined ? 'play-solid' : 'pause-solid' }) }), onHoldSince ? (_jsxs(_Fragment, { children: [onMergeCall && (_jsx(Button, { icon: true, variant: 'simple', onClick: () => onMergeCall(callId), label: t('call_panel_merge_call_menu_item'), children: _jsx(Icon, { name: 'phone-split-solid' }) })), onHandOffCall && (_jsx(Button, { icon: true, variant: 'simple', onClick: () => onHandOffCall(callId), label: t('call_panel_handoff_call_menu_item'), children: _jsx(Icon, { name: 'phone-out-solid' }) })), _jsx(Button, { icon: true, variant: 'simple', disabled: !onEndCall, onClick: () => onEndCall?.(callId), label: t('call_panel_hangup_call_menu_item'), children: _jsx(Icon, { name: 'phone-hangup-solid' }) }, 'hang_up')] })) : (_jsx(Actions, { ref: moreActionsButtonRef, items: [
+                                    {
+                                        id: 'consult',
+                                        text: t('call_panel_consult_call_menu_item'),
+                                        disabled: !onConsultAction,
+                                        onClick: () => setShowPopover('consult')
+                                    },
+                                    {
+                                        id: 'transfer',
+                                        text: t('call_panel_transfer_call_menu_item'),
+                                        disabled: !onTransferAction,
+                                        onClick: () => setShowPopover('transfer')
+                                    },
+                                    {
+                                        id: 'conference',
+                                        text: t('call_panel_conference_call_menu_item'),
+                                        disabled: !onConferenceAction,
+                                        onClick: () => setShowPopover('conference')
+                                    },
+                                    {
+                                        id: 'dtmf',
+                                        text: t('call_panel_send_dtmf_menu_item'),
+                                        disabled: !onDTMFPress,
+                                        onClick: () => setShowPopover('dtmf')
+                                    },
+                                    {
+                                        id: 'hang_up',
+                                        text: t('call_panel_hangup_call_menu_item'),
+                                        disabled: !onEndCall,
+                                        onClick: () => onEndCall?.(callId)
+                                    }
+                                ] }))] })) : (_jsx(Button, { icon: true, variant: 'simple', disabled: !item.onHangUp, onClick: () => item.onHangUp?.(callId, item.id), label: t('call_panel_hangup_call_menu_item'), children: _jsx(Icon, { name: 'phone-hangup-solid' }) }, 'hang_up')) }, item.id));
             }), onHoldSince !== undefined && (_jsx(Status, { as: StyledHoldInfo, variant: 'pending', children: t('call_panel_call_on_hold', [
-                    _jsx(StopWatch, { startTime: onHoldSince }, void 0)
-                ]) }, void 0)), _jsx(Popover, { target: moreActionsButtonRef.current, ref: setPopoverRef, placement: 'top-end', show: showConsultPopover || showTransferPopover || showSendDTMF || showConferencePopover, children: popoverContent }, void 0)] }, void 0));
+                    _jsx(StopWatch, { startTime: onHoldSince })
+                ]) })), _jsx(Popover, { target: moreActionsButtonRef.current, ref: setPopoverRef, placement: 'top-end', show: Boolean(showPopover), children: _jsxs(Card, { children: [_jsx(CardHeader, { actions: _jsx(Button, { icon: true, variant: 'simple', "aria-label": t('close'), onClick: () => setShowPopover(null), children: _jsx(Icon, { name: 'times' }) }), children: _jsx(Text, { variant: 'h3', children: popoverHeading }) }), _jsx(CardContent, { children: popoverContent })] }) })] }));
 };
 export default Call;
 //# sourceMappingURL=Call.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Call.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/Call.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAgC,SAAS,EAAE,eAAe,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEnG,OAAO,EAEL,OAAO,EACP,MAAM,EACN,IAAI,EAEJ,IAAI,EACJ,YAAY,EACZ,OAAO,EACP,MAAM,EACN,WAAW,EACX,IAAI,EACJ,UAAU,EACV,OAAO,EACP,aAAa,EACd,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,WAAW,MAAM,iEAAiE,CAAC;AAC/F,OAAO,KAAK,YAAY,MAAM,kEAAkE,CAAC;AACjG,OAAO,KAAK,eAAe,MAAM,sEAAsE,CAAC;AACxG,OAAO,KAAK,YAAY,MAAM,mEAAmE,CAAC;AAClG,OAAO,KAAK,cAAc,MAAM,oEAAoE,CAAC;AACrG,OAAO,KAAK,mBAAmB,MAAM,0EAA0E,CAAC;AAChH,OAAO,KAAK,oBAAoB,MAAM,2EAA2E,CAAC;AAElH,OAAO,EACL,cAAc,EACd,uBAAuB,EACvB,iBAAiB,EAClB,MAAM,2BAA2B,CAAC;AAEnC,OAAO,YAAY,MAAM,gBAAgB,CAAC;AAC1C,OAAO,YAAY,MAAM,gBAAgB,CAAC;AAC1C,OAAO,UAAU,MAAM,cAAc,CAAC;AACtC,OAAO,SAAS,MAAM,aAAa,CAAC;AACpC,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEvC,YAAY,CACV,WAAW,EACX,YAAY,EACZ,eAAe,EACf,YAAY,EACZ,cAAc,EACd,mBAAmB,EACnB,oBAAoB,CACrB,CAAC;AAEF,MAAM,IAAI,GAAgD,CAAC,EACzD,EAAE,EAAE,MAAM,EACV,SAAS,EACT,WAAW,EACX,SAAS,EACT,YAAY,EACZ,aAAa,EACb,KAAK,EACL,YAAY,EACZ,WAAW,EACX,eAAe,EACf,kBAAkB,EAClB,gBAAgB,EAChB,WAAW,EACX,eAAe,EACU,EAAE,EAAE;IAC7B,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,oBAAoB,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IAC7D,MAAM,WAAW,GAAG,SAAS,YAAY,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,kBAAkB,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC;IAC3F,MAAM,CAAC,SAAS,EAAE,aAAa,CAAC,GAAG,UAAU,EAAe,CAAC;IAC7D,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAqB,SAAS,CAAC,CAAC;IACxE,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACpE,MAAM,CAAC,qBAAqB,EAAE,wBAAwB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC1E,MAAM,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACtE,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxD,MAAM,EAAE,UAAU,EAAE,WAAW,EAAE,GAAG,YAAY,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,WAAW,EAAE,SAAS,CAAC,CAAC;IAEtF,MAAM,sBAAsB,GAAG,CAAC,WAAqB,EAAE,EAAE;QACvD,WAAW,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,EAAE;YACvB,EAAE,EAAE,YAAY;YAChB,IAAI,EAAE,CAAC,CAAC,sCAAsC,CAAC;YAC/C,OAAO,EAAE,GAAG,EAAE,CAAC,wBAAwB,CAAC,IAAI,CAAC;SAC9C,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,MAAM,wBAAwB,GAAG,GAAS,EAAE;QAC1C,MAAM,EAAE,eAAe,EAAE,GAAG,YAAY,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,WAAW,EAAE,SAAS,CAAC,CAAC;QAC9E,WAAW,CAAC,eAAe,CAAC,CAAC;IAC/B,CAAC,CAAC;IAEF,MAAM,cAAc,GAAG,CAAC,IAAqB,EAAY,EAAE;QACzD,MAAM,WAAW,GAAG;YAClB;gBACE,EAAE,EAAE,SAAS;gBACb,IAAI,EAAE,CAAC,CAAC,mCAAmC,CAAC;gBAC5C,OAAO,EAAE,GAAG,EAAE,CAAC,qBAAqB,CAAC,IAAI,CAAC;aAC3C;YAED;gBACE,EAAE,EAAE,UAAU;gBACd,IAAI,EAAE,CAAC,CAAC,oCAAoC,CAAC;gBAC7C,OAAO,EAAE,GAAG,EAAE,CAAC,sBAAsB,CAAC,IAAI,CAAC;aAC5C;YACD;gBACE,EAAE,EAAE,MAAM;gBACV,IAAI,EAAE,CAAC,CAAC,gCAAgC,CAAC;gBACzC,OAAO,EAAE,GAAG,EAAE,CAAC,eAAe,CAAC,IAAI,CAAC;aACrC;YACD;gBACE,EAAE,EAAE,SAAS;gBACb,IAAI,EAAE,CAAC,CAAC,kCAAkC,CAAC;gBAC3C,QAAQ,EAAE,CAAC,IAAI,CAAC,SAAS;gBACzB,OAAO,EAAE,GAAG,EAAE;oBACZ,IAAI,IAAI,CAAC,SAAS;wBAAE,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;gBACtD,CAAC;aACF;SACF,CAAC;QACF,IAAI,kBAAkB,EAAE;YACtB,sBAAsB,CAAC,WAAW,CAAC,CAAC;SACrC;QACD,OAAO,WAAW,CAAC;IACrB,CAAC,CAAC;IAEF,eAAe,CAAC,GAAG,EAAE;QACnB,wBAAwB,EAAE,CAAC;QAC3B,MAAM,mBAAmB,GAAG,WAAW,IAAI,WAAW,GAAG,IAAI,CAAC;QAE9D,MAAM,KAAK,GAAG,UAAU,CAAC,GAAG,EAAE;YAC5B,wBAAwB,EAAE,CAAC;QAC7B,CAAC,EAAE,mBAAmB,CAAC,CAAC;QAExB,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;IACnC,CAAC,EAAE,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC,CAAC;IAE5B,aAAa,CAAC,WAAW,EAAE,CAAC,SAAS,CAAC,EAAE,GAAG,EAAE;QAC3C,qBAAqB,CAAC,KAAK,CAAC,CAAC;QAC7B,sBAAsB,CAAC,KAAK,CAAC,CAAC;QAC9B,wBAAwB,CAAC,KAAK,CAAC,CAAC;QAChC,eAAe,CAAC,KAAK,CAAC,CAAC;IACzB,CAAC,CAAC,CAAC;IAEH,MAAM,SAAS,GAAG,CAAC,EAAE,GAAG,EAAiB,EAAE,EAAE;QAC3C,IAAI,GAAG,KAAK,QAAQ,EAAE;YACpB,qBAAqB,CAAC,KAAK,CAAC,CAAC;YAC7B,sBAAsB,CAAC,KAAK,CAAC,CAAC;YAC9B,wBAAwB,CAAC,KAAK,CAAC,CAAC;YAChC,eAAe,CAAC,KAAK,CAAC,CAAC;SACxB;IACH,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;QAChD,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;QACrD,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,IAAI,cAAc,GAAc,IAAI,CAAC;IACrC,IAAI,kBAAkB,EAAE;QACtB,cAAc,GAAG,CACf,KAAC,YAAY,IACX,OAAO,EAAE,CAAC,CAAC,iCAAiC,CAAC,EAC7C,OAAO,EAAE,GAAG,EAAE,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAC3C,MAAM,EAAE,WAAW,CAAC,EAAE;gBACpB,eAAe,EAAE,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;gBACvC,qBAAqB,CAAC,KAAK,CAAC,CAAC;YAC/B,CAAC,WACD,CACH,CAAC;KACH;SAAM,IAAI,qBAAqB,EAAE;QAChC,cAAc,GAAG,CACf,KAAC,YAAY,IACX,OAAO,EAAE,CAAC,CAAC,+BAA+B,CAAC,EAC3C,OAAO,EAAE,GAAG,EAAE,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAC9C,MAAM,EAAE,WAAW,CAAC,EAAE;gBACpB,kBAAkB,EAAE,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;gBAC1C,wBAAwB,CAAC,KAAK,CAAC,CAAC;YAClC,CAAC,WACD,CACH,CAAC;KACH;SAAM,IAAI,mBAAmB,EAAE;QAC9B,cAAc,GAAG,CACf,KAAC,YAAY,IACX,OAAO,EAAE,GAAG,EAAE,CAAC,sBAAsB,CAAC,KAAK,CAAC,EAC5C,cAAc,EAAE,YAAY,CAAC,EAAE;gBAC7B,gBAAgB,EAAE,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC;gBACzC,sBAAsB,CAAC,KAAK,CAAC,CAAC;YAChC,CAAC,EACD,eAAe,EAAE,eAAe,WAChC,CACH,CAAC;KACH;SAAM,IAAI,YAAY,EAAE;QACvB,cAAc,GAAG,CACf,KAAC,UAAU,IACT,OAAO,EAAE,GAAG,EAAE,CAAC,eAAe,CAAC,KAAK,CAAC,EACrC,iBAAiB,EAAE,CAAC,GAAW,EAAE,EAAE,CAAC,WAAW,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,WACnF,CACH,CAAC;KACH;IAED,OAAO,CACL,MAAC,uBAAuB,eACtB,KAAC,iBAAiB,IAChB,WAAW,QACX,SAAS,EAAC,OAAO,EACjB,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,WAClB,EACD,YAAY,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;gBAChC,OAAO,CACL,KAAC,WAAW,IACV,SAAS,EACP,KAAK,KAAK,CAAC;wBACT,CAAC,CAAC;4BACE,KAAK,EAAE,6BAA6B;4BACpC,IAAI,EAAE,0BAA0B;yBACjC;wBACH,CAAC,CAAC;4BACE,KAAK,EAAE,oCAAoC;4BAC3C,IAAI,EAAE,+BAA+B;yBACtC,EAEP,gBAAgB,EAAC,UAAU,EAC3B,MAAM,EAAE,KAAK,KAAK,CAAC,IAAI,KAAC,IAAI,IAAC,IAAI,EAAC,UAAU,WAAG,EAC/C,OAAO,EAAE,IAAI,CAAC,IAAI,EAClB,SAAS,EAAE,IAAI,CAAC,IAAI,IAAI,KAAC,IAAI,IAAC,OAAO,EAAC,WAAW,YAAE,IAAI,CAAC,IAAI,WAAQ,EAEpE,OAAO,EACL,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,aAChC,SAAS,IAAI,KAAK,KAAK,CAAC,IAAI,CAC3B,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,YACvC,KAAC,SAAS,IAAC,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,UAAU,WAAI,WACnD,CACR,EACA,KAAK,KAAK,CAAC,IAAI,CACd,8BACE,KAAC,MAAM,IACL,IAAI,QACJ,OAAO,EAAC,QAAQ,EAChB,QAAQ,EAAE,WAAW,KAAK,SAAS,EACnC,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,EACnC,KAAK,EAAE,CAAC,CACN,KAAK,CAAC,CAAC,CAAC,iCAAiC,CAAC,CAAC,CAAC,+BAA+B,CAC5E,YAED,KAAC,IAAI,IAAC,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,eAAe,WAAI,WAC9C,EACT,KAAC,MAAM,IACL,IAAI,QACJ,OAAO,EAAC,QAAQ,EAChB,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,MAAM,CAAC,EACpC,KAAK,EAAE,CAAC,CACN,WAAW,KAAK,SAAS;4CACvB,CAAC,CAAC,kCAAkC;4CACpC,CAAC,CAAC,iCAAiC,CACtC,YAED,KAAC,IAAI,IAAC,IAAI,EAAE,WAAW,KAAK,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,aAAa,WAAI,WACjE,YACR,CACJ,EACA,KAAK,KAAK,CAAC,IAAI,SAAS,IAAI,CAC3B,KAAC,OAAO,IAAC,GAAG,EAAE,oBAAoB,EAAE,KAAK,EAAE,cAAc,CAAC,IAAI,CAAC,WAAI,CACpE,EAEA,WAAW,IAAI,CACd,KAAC,MAAM,IACL,IAAI,QACJ,OAAO,EAAC,QAAQ,EAEhB,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,MAAM,CAAC,EAClC,KAAK,EAAE,CAAC,CAAC,iCAAiC,CAAC,YAE3C,KAAC,IAAI,IAAC,IAAI,EAAC,mBAAmB,WAAG,IAJ7B,OAAO,CAKJ,CACV,EAEA,CAAC,CAAC,SAAS,IAAI,KAAK,KAAK,CAAC,CAAC,IAAI,CAC9B,KAAC,MAAM,IACL,IAAI,QACJ,OAAO,EAAC,QAAQ,EAEhB,OAAO,EAAE,GAAG,EAAE;oCACZ,IAAI,IAAI,CAAC,SAAS;wCAAE,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;gCACtD,CAAC,EACD,KAAK,EAAE,CAAC,CAAC,kCAAkC,CAAC,YAE5C,KAAC,IAAI,IAAC,IAAI,EAAC,oBAAoB,WAAG,IAN9B,SAAS,CAON,CACV,YACI,IAhEJ,IAAI,CAAC,EAAE,CAkEZ,CACH,CAAC;YACJ,CAAC,CAAC,EACD,WAAW,KAAK,SAAS,IAAI,CAC5B,KAAC,MAAM,IAAC,EAAE,EAAE,cAAc,EAAE,OAAO,EAAC,SAAS,YAEzC,CAAC,CAAC,yBAAyB,EAAE;oBAC3B,KAAC,SAAS,IAAC,SAAS,EAAE,WAAW,WAAI;iBACtC,CAAsB,WAElB,CACV,EAED,KAAC,OAAO,IACN,MAAM,EAAE,oBAAoB,CAAC,OAAO,EACpC,GAAG,EAAE,aAAa,EAClB,SAAS,EAAC,SAAS,EACnB,IAAI,EAAE,kBAAkB,IAAI,mBAAmB,IAAI,YAAY,IAAI,qBAAqB,YAEvF,cAAc,WACP,YACc,CAC3B,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,IAAI,CAAC","sourcesContent":["import { FunctionComponent, ReactNode, useEffect, useLayoutEffect, useRef, useState } from 'react';\n\nimport {\n  Action,\n  Actions,\n  Button,\n  Flex,\n  ForwardProps,\n  Icon,\n  registerIcon,\n  Popover,\n  Status,\n  SummaryItem,\n  Text,\n  useElement,\n  useI18n,\n  useOuterEvent\n} from '@pega/cosmos-react-core';\nimport * as arrowUpIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/arrow-up.icon';\nimport * as micSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/mic-solid.icon';\nimport * as micOffSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/mic-off-solid.icon';\nimport * as playSoldIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/play-solid.icon';\nimport * as pauseSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/pause-solid.icon';\nimport * as phoneSplitSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/phone-split-solid.icon';\nimport * as phoneHangupSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/phone-hangup-solid.icon';\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\nregisterIcon(\n  arrowUpIcon,\n  micSolidIcon,\n  micOffSolidIcon,\n  playSoldIcon,\n  pauseSolidIcon,\n  phoneSplitSolidIcon,\n  phoneHangupSolidIcon\n);\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: ReactNode = null;\n  if (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  } else if (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  } else if (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  } else if (showSendDTMF) {\n    popoverContent = (\n      <DTMFKeypad\n        onClose={() => setShowSendDTMF(false)}\n        onDialButtonClick={(key: number) => onDTMFPress?.(callId, String.fromCharCode(key))}\n      />\n    );\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          {\n            t('call_panel_call_on_hold', [\n              <StopWatch startTime={onHoldSince} />\n            ]) 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"]}
+{"version":3,"file":"Call.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/Call.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, ReactNode, useLayoutEffect, useRef, useState } from 'react';\n\nimport {\n  Actions,\n  Button,\n  Flex,\n  ForwardProps,\n  Icon,\n  registerIcon,\n  Popover,\n  Status,\n  SummaryItem,\n  Text,\n  useElement,\n  useI18n,\n  useOuterEvent,\n  useEscape,\n  Card,\n  CardHeader,\n  CardContent\n} from '@pega/cosmos-react-core';\nimport * as arrowUpIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/arrow-up.icon';\nimport * as micSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/mic-solid.icon';\nimport * as micOffSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/mic-off-solid.icon';\nimport * as playSoldIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/play-solid.icon';\nimport * as pauseSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/pause-solid.icon';\nimport * as phoneSplitSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/phone-split-solid.icon';\nimport * as phoneOutSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/phone-out-solid.icon';\nimport * as phoneHangupSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/phone-hangup-solid.icon';\n\nimport DialPad from '../DialPad';\n\nimport {\n  StyledHoldInfo,\n  StyledProgressContainer,\n  StyledSLAProgress\n} from './CallControlPanel.styles';\nimport type { CallProps } from './CallControlPanel.types';\nimport CallHandoverForm from './CallHandoverForm';\nimport StopWatch from './StopWatch';\nimport { calculateSla } from './utils';\n\nregisterIcon(\n  arrowUpIcon,\n  micSolidIcon,\n  micOffSolidIcon,\n  playSoldIcon,\n  pauseSolidIcon,\n  phoneSplitSolidIcon,\n  phoneOutSolidIcon,\n  phoneHangupSolidIcon\n);\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  onHandOffCall,\n  onEndCall,\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 [showPopover, setShowPopover] = useState<\n    'transfer' | 'conference' | 'consult' | 'dtmf' | null\n  >(null);\n  const { slaTimeout, slaDuration } = calculateSla(Date.now() - inCallSince, slaConfig);\n\n  const calculateCurrentSlaLevel = (): void => {\n    const { currentSlaLevel } = calculateSla(Date.now() - inCallSince, slaConfig);\n    setSlaLevel(currentSlaLevel);\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], () => setShowPopover(null));\n\n  useEscape(() => setShowPopover(null), popoverEl);\n\n  let popoverContent: ReactNode;\n  let popoverHeading: string;\n  switch (showPopover) {\n    case 'consult':\n      popoverHeading = t('call_panel_consult_with_heading');\n      popoverContent = (\n        <CallHandoverForm\n          onCancel={() => setShowPopover(null)}\n          onSubmit={transferData => {\n            onConsultAction?.(callId, transferData);\n            setShowPopover(null);\n          }}\n          transferOptions={transferOptions}\n        />\n      );\n      break;\n    case 'conference':\n      popoverHeading = t('call_panel_conference_heading');\n      popoverContent = (\n        <CallHandoverForm\n          onCancel={() => setShowPopover(null)}\n          onSubmit={transferData => {\n            onConferenceAction?.(callId, transferData);\n            setShowPopover(null);\n          }}\n          transferOptions={transferOptions}\n        />\n      );\n      break;\n    case 'transfer':\n      popoverHeading = t('call_panel_transfer_call_heading');\n      popoverContent = (\n        <CallHandoverForm\n          onCancel={() => setShowPopover(null)}\n          onSubmit={transferData => {\n            onTransferAction?.(callId, transferData);\n            setShowPopover(null);\n          }}\n          transferOptions={transferOptions}\n        />\n      );\n      break;\n    case 'dtmf':\n      popoverHeading = t('call_panel_send_dtmf_heading');\n      popoverContent = (\n        <DialPad\n          onDialButtonClick={(key: number) => onDTMFPress?.(callId, String.fromCharCode(key))}\n          mode='DTMF'\n        />\n      );\n      break;\n    default:\n      popoverHeading = '';\n      popoverContent = null;\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              index === 0 ? (\n                <Flex container={{ wrap: 'nowrap' }}>\n                  {slaConfig && (\n                    <Flex container={{ alignItems: 'center' }}>\n                      <StopWatch startTime={startedAt} timeout={slaTimeout} />\n                    </Flex>\n                  )}\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\n                  <Button\n                    icon\n                    variant='simple'\n                    disabled={!onPauseToggle}\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                  {onHoldSince ? (\n                    <>\n                      {onMergeCall && (\n                        <Button\n                          icon\n                          variant='simple'\n                          onClick={() => onMergeCall(callId)}\n                          label={t('call_panel_merge_call_menu_item')}\n                        >\n                          <Icon name='phone-split-solid' />\n                        </Button>\n                      )}\n                      {onHandOffCall && (\n                        <Button\n                          icon\n                          variant='simple'\n                          onClick={() => onHandOffCall(callId)}\n                          label={t('call_panel_handoff_call_menu_item')}\n                        >\n                          <Icon name='phone-out-solid' />\n                        </Button>\n                      )}\n                      <Button\n                        icon\n                        variant='simple'\n                        key='hang_up'\n                        disabled={!onEndCall}\n                        onClick={() => onEndCall?.(callId)}\n                        label={t('call_panel_hangup_call_menu_item')}\n                      >\n                        <Icon name='phone-hangup-solid' />\n                      </Button>\n                    </>\n                  ) : (\n                    <Actions\n                      ref={moreActionsButtonRef}\n                      items={[\n                        {\n                          id: 'consult',\n                          text: t('call_panel_consult_call_menu_item'),\n                          disabled: !onConsultAction,\n                          onClick: () => setShowPopover('consult')\n                        },\n                        {\n                          id: 'transfer',\n                          text: t('call_panel_transfer_call_menu_item'),\n                          disabled: !onTransferAction,\n                          onClick: () => setShowPopover('transfer')\n                        },\n                        {\n                          id: 'conference',\n                          text: t('call_panel_conference_call_menu_item'),\n                          disabled: !onConferenceAction,\n                          onClick: () => setShowPopover('conference')\n                        },\n                        {\n                          id: 'dtmf',\n                          text: t('call_panel_send_dtmf_menu_item'),\n                          disabled: !onDTMFPress,\n                          onClick: () => setShowPopover('dtmf')\n                        },\n                        {\n                          id: 'hang_up',\n                          text: t('call_panel_hangup_call_menu_item'),\n                          disabled: !onEndCall,\n                          onClick: () => onEndCall?.(callId)\n                        }\n                      ]}\n                    />\n                  )}\n                </Flex>\n              ) : (\n                <Button\n                  icon\n                  variant='simple'\n                  key='hang_up'\n                  disabled={!item.onHangUp}\n                  onClick={() => item.onHangUp?.(callId, item.id)}\n                  label={t('call_panel_hangup_call_menu_item')}\n                >\n                  <Icon name='phone-hangup-solid' />\n                </Button>\n              )\n            }\n          />\n        );\n      })}\n      {onHoldSince !== undefined && (\n        <Status as={StyledHoldInfo} variant='pending'>\n          {\n            t('call_panel_call_on_hold', [\n              <StopWatch startTime={onHoldSince} />\n            ]) as unknown as string\n          }\n        </Status>\n      )}\n\n      <Popover\n        target={moreActionsButtonRef.current}\n        ref={setPopoverRef}\n        placement='top-end'\n        show={Boolean(showPopover)}\n      >\n        <Card>\n          <CardHeader\n            actions={\n              <Button\n                icon\n                variant='simple'\n                aria-label={t('close')}\n                onClick={() => setShowPopover(null)}\n              >\n                <Icon name='times' />\n              </Button>\n            }\n          >\n            <Text variant='h3'>{popoverHeading}</Text>\n          </CardHeader>\n          <CardContent>{popoverContent}</CardContent>\n        </Card>\n      </Popover>\n    </StyledProgressContainer>\n  );\n};\n\nexport default Call;\n"]}

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

@@ -1 +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,EAaL,YAAY,EAGb,MAAM,yBAAyB,CAAC;AAMjC,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AAatE,QAAA,MAAM,gBAAgB,EAAE,iBAAiB,CAAC,qBAAqB,GAAG,YAAY,CAgJ7E,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"CallControlPanel.d.ts","sourceRoot":"","sources":["../../../src/components/CallControlPanel/CallControlPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAqC,MAAM,OAAO,CAAC;AAEzF,OAAO,EASL,YAAY,EAGb,MAAM,yBAAyB,CAAC;AAIjC,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AAStE,QAAA,MAAM,gBAAgB,EAAE,iBAAiB,CAAC,qBAAqB,GAAG,YAAY,CAoG7E,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/lib/components/CallControlPanel/CallControlPanel.js

@@ -1,68 +1,49 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { forwardRef, useEffect, useMemo, useRef, useState } from 'react';
-import { CardHeader, CardContent, Button, useI18n, Icon, registerIcon, Flex, ComboBox, Text, Popover, useOuterEvent, useElement, useConsolidatedRef, useDraggable } from '@pega/cosmos-react-core';
-import * as caretDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-down.icon';
-import * as phoneSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/phone-solid.icon';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useRef, useState } from 'react';
+import { CardContent, useI18n, registerIcon, Flex, ComboBox, Popover, useOuterEvent, useElement, useConsolidatedRef, useEscape } from '@pega/cosmos-react-core';
 import * as plusIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/plus.icon';
 import CalleePicker, { ContactsContext } from './CalleePicker';
 import Call from './Call';
 import StopWatch from './StopWatch';
-import { StyledCallControlPanel, StyledStatusRow } from './CallControlPanel.styles';
+import { StyledStatusRow } from './CallControlPanel.styles';
 import { UserStatusIcon } from './CallControlPanelIcon';
-registerIcon(plusIcon, caretDownIcon, phoneSolidIcon);
-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) => {
+import FloatingPanel from './FloatingPanel';
+registerIcon(plusIcon);
+const CallControlPanel = forwardRef(({ heading, status, statusOptions, onStatusChange, inStatusSince, message, draggable = false, calls, onAddCall, contactsList, onFavoriteToggle, visible, ...restProps }, ref) => {
     const t = useI18n();
-    const addButtonRef = useRef(null);
+    const newCallButtonRef = 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 };
-        });
-    }, [status, statusOptions]);
     useOuterEvent('mousedown', [popoverEl], () => {
         setShowPopover(false);
     });
-    const onKeyDown = ({ key }) => {
-        if (key === 'Escape')
-            setShowPopover(false);
-    };
-    useEffect(() => {
-        document.addEventListener('keydown', onKeyDown);
-        return () => {
-            document.removeEventListener('keydown', onKeyDown);
-        };
-    }, [popoverEl]);
-    const headerHeight = containerRef.current?.querySelector('header')?.offsetHeight || 0;
+    useEscape(() => setShowPopover(false), popoverEl);
     const selectedStatusOption = statusOptions.find(s => s.id === status);
+    const newCallButton = {
+        id: 'new-call',
+        text: t('call_panel_make_new_call'),
+        onClick: () => setShowPopover(true),
+        icon: 'plus',
+        ref: newCallButtonRef
+    };
     return (_jsx(ContactsContext.Provider, { value: {
             contacts: contactsList,
             onFavoriteToggle
-        }, children: _jsxs(StyledCallControlPanel, { ref: containerRef, ...restProps, isCollapsed: collapsed, isDraggable: draggable, style: { '--headerHeight': `${headerHeight}px` }, children: [_jsx(CardHeader, { ref: !collapsed && draggable ? dragRef : undefined, actions: _jsxs(_Fragment, { children: [_jsx(Button, { 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, { icon: true, variant: 'simple', "aria-label": t(collapsed ? 'call_panel_expand' : 'call_panel_collapse'), onClick: () => {
-                                    resetPopoverToDefaultPosition(containerRef);
-                                    setCollapsed(state => !state);
-                                }, children: _jsx(Icon, { name: 'caret-down' }, void 0) }, 'expand-collapse')] }, void 0), children: _jsxs(Flex, { container: { alignItems: 'center', itemGap: 1 }, children: [_jsx(Icon, { name: 'phone-solid' }, void 0), _jsx(Text, { variant: 'h3', children: heading }, void 0)] }, void 0) }, void 0), _jsxs(CardContent, { container: { itemGap: 2 }, children: [_jsxs(Flex, { as: StyledStatusRow, container: { alignItems: 'start', itemGap: 1 }, children: [_jsx(UserStatusIcon, { variant: 'dot', status: selectedStatusOption?.status }, void 0), _jsx(Flex, { item: { grow: 1 }, children: _jsx(ComboBox, { label: t('call_panel_agent_status'), labelHidden: true, selected: {
+        }, children: _jsxs(FloatingPanel, { ...restProps, ref: containerRef, draggable: draggable, visible: visible, heading: heading, actions: [newCallButton], children: [_jsxs(CardContent, { container: { itemGap: 2 }, children: [_jsxs(Flex, { as: StyledStatusRow, container: { alignItems: 'start', itemGap: 1 }, children: [_jsx(UserStatusIcon, { variant: 'dot', status: selectedStatusOption?.status }), _jsx(Flex, { item: { grow: 1 }, children: _jsx(ComboBox, { label: t('call_panel_agent_status'), labelHidden: true, selected: {
                                             items: {
                                                 id: status,
                                                 text: selectedStatusOption?.label || ''
                                             }
                                         }, 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, { ...callProps }, callProps.id)))] }, void 0), showPopover && (_jsx(Popover, { target: addButtonRef.current, ref: setPopoverRef, placement: 'top-end', children: _jsx(CalleePicker, { heading: t('call_panel_new_call_heading'), onClose: () => setShowPopover(false), onCall: phoneNumber => {
+                                            items: statusOptions.map(({ id, label, disabled }) => {
+                                                return { id, primary: label, selected: id === status, disabled };
+                                            }),
+                                            onItemClick: onStatusChange
+                                        }, info: message }) }), _jsx(StopWatch, { startTime: inStatusSince })] }), calls.map(callProps => (_jsx(Call, { ...callProps }, callProps.id)))] }), showPopover && (_jsx(Popover, { target: newCallButtonRef.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));
+                        } }) }))] }) }));
 });
 export default CallControlPanel;
 //# sourceMappingURL=CallControlPanel.js.map

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

@@ -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  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  registerIcon,\n  Flex,\n  ComboBox,\n  Text,\n  Popover,\n  useOuterEvent,\n  useElement,\n  ForwardProps,\n  useConsolidatedRef,\n  useDraggable\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 * as plusIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/plus.icon';\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\nregisterIcon(plusIcon, caretDownIcon, phoneSolidIcon);\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 ? '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 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"]}
+{"version":3,"file":"CallControlPanel.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/CallControlPanel.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, useRef, useState } from 'react';\n\nimport {\n  CardContent,\n  useI18n,\n  registerIcon,\n  Flex,\n  ComboBox,\n  Popover,\n  useOuterEvent,\n  useElement,\n  ForwardProps,\n  useConsolidatedRef,\n  useEscape\n} from '@pega/cosmos-react-core';\nimport * as plusIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/plus.icon';\n\nimport CalleePicker, { ContactsContext } from './CalleePicker';\nimport type { CallControlPanelProps } from './CallControlPanel.types';\nimport Call from './Call';\nimport StopWatch from './StopWatch';\nimport { StyledStatusRow } from './CallControlPanel.styles';\nimport { UserStatusIcon } from './CallControlPanelIcon';\nimport FloatingPanel, { FloatingPanelActionProps } from './FloatingPanel';\n\nregisterIcon(plusIcon);\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      visible,\n      ...restProps\n    }: PropsWithoutRef<CallControlPanelProps>,\n    ref: CallControlPanelProps['ref']\n  ) => {\n    const t = useI18n();\n    const newCallButtonRef = useRef<HTMLButtonElement>(null);\n    const [showPopover, setShowPopover] = useState(false);\n    const containerRef = useConsolidatedRef(ref);\n    const [popoverEl, setPopoverRef] = useElement<HTMLElement>();\n\n    useOuterEvent('mousedown', [popoverEl], () => {\n      setShowPopover(false);\n    });\n\n    useEscape(() => setShowPopover(false), popoverEl);\n\n    const selectedStatusOption = statusOptions.find(s => s.id === status);\n\n    const newCallButton: FloatingPanelActionProps = {\n      id: 'new-call',\n      text: t('call_panel_make_new_call'),\n      onClick: () => setShowPopover(true),\n      icon: 'plus',\n      ref: newCallButtonRef\n    };\n\n    return (\n      <ContactsContext.Provider\n        value={{\n          contacts: contactsList,\n          onFavoriteToggle\n        }}\n      >\n        <FloatingPanel\n          {...restProps}\n          ref={containerRef}\n          draggable={draggable}\n          visible={visible}\n          heading={heading}\n          actions={[newCallButton]}\n        >\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: statusOptions.map(({ id, label, disabled }) => {\n                      return { id, primary: label, selected: id === status, disabled };\n                    }),\n                    onItemClick: onStatusChange\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={newCallButtonRef.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        </FloatingPanel>\n      </ContactsContext.Provider>\n    );\n  }\n);\n\nexport default CallControlPanel;\n"]}

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

@@ -8,8 +8,4 @@ export declare const StyledSLAProgress: import("styled-components").StyledCompon
     slaDuration?: number | undefined;
     slaLevel?: number | undefined;
 }, 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

@@ -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;iBACpB,OAAO;;SA6BpB,CAAC"}
+{"version":3,"file":"CallControlPanel.styles.d.ts","sourceRoot":"","sources":["../../../src/components/CallControlPanel/CallControlPanel.styles.ts"],"names":[],"mappings":"AAEA,OAAO,EAQL,aAAa,EAId,MAAM,yBAAyB,CAAC;AAKjC,eAAO,MAAM,uBAAuB,yGAoCnC,CAAC;AAIF,eAAO,MAAM,cAAc,qJAI1B,CAAC;AAIF,eAAO,MAAM,eAAe,yGAiB3B,CAAC;AAIF,eAAO,MAAM,iBAAiB;;;;;SAwC5B,CAAC"}

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

@@ -1,7 +1,6 @@
 import styled, { css } from 'styled-components';
-import { defaultThemeProp, StyledBackdrop, StyledButton, StyledFlex, StyledProgressBar, StyledSummaryItemActions, StyledVisual, StyledSummaryItem, StyledCard, StyledPrimary, StyledSecondary } from '@pega/cosmos-react-core';
+import { defaultThemeProp, StyledBackdrop, StyledButton, StyledFlex, StyledProgressBar, StyledSummaryItemActions, StyledVisual, StyledSummaryItem, StyledPrimary, StyledSecondary } from '@pega/cosmos-react-core';
 import { StyledStatus } from '@pega/cosmos-react-core/lib/components/Badges/Status';
-import { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';
 import { StyledStopWatch } from './StopWatch';
 export const StyledProgressContainer = styled.div(({ theme: { base: { spacing }, components: { card } } }) => {
     return css `
@@ -86,33 +85,4 @@ export const StyledSLAProgress = styled(StyledProgressBar)(({ theme, slaDuration
   `;
 });
 StyledSLAProgress.defaultProps = defaultThemeProp;
-export const StyledCallControlPanel = styled(StyledCard)(({ theme, isCollapsed, isDraggable }) => {
-    return css `
-    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 `
-        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)'};
-    }
-  `;
-});
-StyledCallControlPanel.defaultProps = defaultThemeProp;
 //# sourceMappingURL=CallControlPanel.styles.js.map

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

@@ -1 +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\nStyledProgressContainer.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"]}
+{"version":3,"file":"CallControlPanel.styles.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/CallControlPanel.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,gBAAgB,EAChB,cAAc,EACd,YAAY,EACZ,UAAU,EACV,iBAAiB,EACjB,wBAAwB,EACxB,YAAY,EAEZ,iBAAiB,EACjB,aAAa,EACb,eAAe,EAChB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,YAAY,EAAE,MAAM,sDAAsD,CAAC;AAEpF,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAE9C,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,GAAG,CAC/C,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,EACjB,UAAU,EAAE,EAAE,IAAI,EAAE,EACrB,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;;UAEJ,cAAc;;;;QAIhB,wBAAwB,IAAI,UAAU,MAAM,YAAY;+BACjC,OAAO;;;UAG5B,iBAAiB;;;;;;YAMf,YAAY;;;YAGZ,aAAa,OAAO,eAAe;;;;;UAKrC,iBAAiB,MAAM,iBAAiB;qCACb,IAAI,CAAC,UAAU;;KAE/C,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,uBAAuB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAExD,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,YAAY,CAAC,CAAA;;;;CAIjD,CAAC;AAEF,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE/C,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CACvC,CAAC,EACC,KAAK,EAAE,EACL,UAAU,EAAE,EACV,KAAK,EAAE,EAAE,MAAM,EAAE,EAClB,EACF,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;;sBAEQ,MAAM;;UAElB,eAAe;uBACF,MAAM;;KAExB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEhD,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,iBAAiB,CAAC,CAExD,CAAC,EAAE,KAAK,EAAE,WAAW,GAAG,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;IACzC,MAAM,EACJ,IAAI,EAAE,EAAE,MAAM,EAAE,EACjB,GAAG,KAAK,CAAC;IAEV,MAAM,EAAE,OAAO,GAAG,MAAM,CAAC,GAAG,CAAC,aAAa,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC,GAAG,CAAC,KAAK,EAAE,GACvE,QAAQ,KAAK,SAAS;QACpB,CAAC,CAAC;YACE,EAAE,OAAO,EAAE,MAAM,CAAC,KAAK,CAAC,aAAa,CAAC,EAAE,OAAO,EAAE,MAAM,CAAC,KAAK,CAAC,KAAK,EAAE;YACrE,EAAE,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,aAAa,CAAC,EAAE,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE;YACvE,EAAE,OAAO,EAAE,MAAM,CAAC,GAAG,CAAC,aAAa,CAAC,EAAE,OAAO,EAAE,MAAM,CAAC,GAAG,CAAC,KAAK,EAAE;SAClE,CAAC,QAAQ,CAAC;QACb,CAAC,CAAC,EAAE,OAAO,EAAE,MAAM,CAAC,KAAK,CAAC,KAAK,EAAE,OAAO,EAAE,MAAM,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;IAEnE,OAAO,GAAG,CAAA;;;;wBAIY,OAAO;gCACC,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;;;wBAGnC,QAAQ;;;;;;;;;;;0BAWN,OAAO;;0BAEP,QAAQ,IAAI,WAAW;;GAE9C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,iBAAiB,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  StyledPrimary,\n  StyledSecondary\n} from '@pega/cosmos-react-core';\nimport { StyledStatus } from '@pega/cosmos-react-core/lib/components/Badges/Status';\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\nStyledProgressContainer.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"]}