@webex/cc-components 1.28.0-ccwidgets.38 → 1.28.0-ccwidgets.39

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 (6) hide show
  1. package/dist/index.js +34 -2
  2. package/dist/types/components/task/CallControl/CallControlCustom/consult-transfer-list-item.d.ts +4 -0
  3. package/dist/types/components/task/CallControl/CallControlCustom/consult-transfer-popover.d.ts +4 -0
  4. package/dist/types/components/task/task.types.d.ts +43 -2
  5. package/dist/wc.js +34 -2
  6. package/package.json +2 -2
package/dist/index.js CHANGED
@@ -1735,7 +1735,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
1735
1735
  /***/ ((module, __webpack_exports__, __webpack_require__) => {
1736
1736
 
1737
1737
  "use strict";
1738
- eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../../../../../node_modules/css-loader/dist/runtime/noSourceMaps.js */ \"../../../node_modules/css-loader/dist/runtime/noSourceMaps.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../../../../../node_modules/css-loader/dist/runtime/api.js */ \"../../../node_modules/css-loader/dist/runtime/api.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);\n// Imports\n\n\nvar ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, `.tooltip.md-modal-container-wrapper {\n color: var(--mds-color-theme-inverted-text-primary-normal);\n background-color: var(--mds-color-theme-inverted-background-normal) !important;\n}\n\n.tooltip .md-modal-container-arrow-wrapper .md-modal-arrow-svg path {\n fill: var(--mds-color-theme-inverted-background-normal) !important;\n}\n\n.call-control-container {\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n}\n.call-control-container .md-select-dropdown-input {\n flex-grow: 1;\n display: flex;\n border: 0.0625rem;\n align-self: flex-start;\n}\n\n.button-group {\n display: flex;\n gap: 0.5rem; /* Reduced gap between buttons/tooltips */\n margin-top: 1rem;\n}\n\n.wrapup-group {\n display: flex;\n flex-direction: column;\n gap: 0.5rem; /* Reduced gap between select and button */\n margin-top: 1rem;\n}\n\n.wrapup-name {\n color: var(--mds-color-theme-text-primary-normal);\n}\n\n.wrapup-select {\n flex-grow: 1;\n padding: 0.5rem;\n margin-top: 0.5rem;\n margin-bottom: 0.75rem;\n border: 0.0625rem solid #ccc;\n border-radius: 0.25rem;\n align-self: flex-start;\n}\n\n.wrapup-select-arrow-icon {\n position: absolute;\n right: 1.5rem; /* Adjusted to leave space for the arrow icon */\n top: 55%;\n transform: translateY(-50%);\n display: flex;\n align-items: center;\n pointer-events: none;\n z-index: 1;\n}\n\n.submit-wrapup-button {\n align-self: flex-end;\n}\n\n.wrapup-header {\n margin-bottom: 0.7rem;\n align-self: flex-start;\n}\n\n.md-select-wrapper {\n display: flex;\n align-items: flex-start;\n flex-direction: column;\n border: 0;\n}\n\n[id*=tippy] {\n border: 0.0625rem solid var(--mds-color-theme-outline-input-normal);\n background-color: var(--mds-color-theme-background-glass-overlay-normal);\n border-radius: 0.5rem;\n}\n\n.md-button-circle-wrapper.call-control-button {\n background-color: var(--mds-color-theme-button-secondary-normal);\n border: 1px solid var(--mds-color-theme-outline-button-normal);\n}\n.md-button-circle-wrapper.call-control-button:hover, .md-button-circle-wrapper.call-control-button.hover {\n background-color: var(--mds-color-theme-button-secondary-hover);\n}\n\n.md-button-circle-wrapper.call-control-button-cancel {\n background-color: var(--mds-color-theme-button-cancel-normal);\n border: 0.0625rem solid var(--mds-color-theme-background-secondary-normal);\n}\n.md-button-circle-wrapper.call-control-button-cancel:hover, .md-button-circle-wrapper.call-control-button-cancel.hover {\n background-color: var(--mds-color-theme-button-cancel-hover);\n}\n\n.call-control-button-icon {\n --mdc-icon-fill-color: var(--mds--color-theme-button-secondary-normal);\n}\n\n.wrapup-button {\n display: inline-flex;\n justify-content: center;\n width: 8rem;\n background-color: var(--mds-color-theme-button-secondary-normal);\n border: 0.0625rem solid var(--mds-color-theme-outline-button-normal);\n color: var(--mds-color-theme-text-primary-normal);\n}\n.wrapup-button:hover, .wrapup-button.hover {\n background-color: var(--mds-color-theme-button-secondary-normal);\n color: var(--mds-color-theme-text-primary-normal);\n}`, \"\"]);\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://@webex/cc-components/./src/components/task/CallControl/call-control.styles.scss?../../../node_modules/css-loader/dist/cjs.js!../../../node_modules/sass-loader/dist/cjs.js");
1738
+ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../../../../../node_modules/css-loader/dist/runtime/noSourceMaps.js */ \"../../../node_modules/css-loader/dist/runtime/noSourceMaps.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../../../../../node_modules/css-loader/dist/runtime/api.js */ \"../../../node_modules/css-loader/dist/runtime/api.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);\n// Imports\n\n\nvar ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, `.tooltip.md-modal-container-wrapper {\n color: var(--mds-color-theme-inverted-text-primary-normal);\n background-color: var(--mds-color-theme-inverted-background-normal) !important;\n}\n\n.tooltip .md-modal-container-arrow-wrapper .md-modal-arrow-svg path {\n fill: var(--mds-color-theme-inverted-background-normal) !important;\n}\n\n.call-control-container {\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n}\n.call-control-container .md-select-dropdown-input {\n flex-grow: 1;\n display: flex;\n border: 0.0625rem;\n align-self: flex-start;\n}\n\n.button-group {\n display: flex;\n gap: 0.5rem; /* Reduced gap between buttons/tooltips */\n margin-top: 1rem;\n}\n\n.wrapup-group {\n display: flex;\n flex-direction: column;\n gap: 0.5rem; /* Reduced gap between select and button */\n margin-top: 1rem;\n}\n\n.wrapup-name {\n color: var(--mds-color-theme-text-primary-normal);\n}\n\n.wrapup-select {\n flex-grow: 1;\n padding: 0.5rem;\n margin-top: 0.5rem;\n margin-bottom: 0.75rem;\n border: 0.0625rem solid #ccc;\n border-radius: 0.25rem;\n align-self: flex-start;\n}\n\n.wrapup-select-arrow-icon {\n position: absolute;\n right: 1.5rem; /* Adjusted to leave space for the arrow icon */\n top: 55%;\n transform: translateY(-50%);\n display: flex;\n align-items: center;\n pointer-events: none;\n z-index: 1;\n}\n\n.submit-wrapup-button {\n align-self: flex-end;\n}\n\n.wrapup-header {\n margin-bottom: 0.7rem;\n align-self: flex-start;\n}\n\n.md-select-wrapper {\n display: flex;\n align-items: flex-start;\n flex-direction: column;\n border: 0;\n}\n\n[id*=tippy] {\n border: 0.0625rem solid var(--mds-color-theme-outline-input-normal);\n background-color: var(--mds-color-theme-background-glass-overlay-normal);\n border-radius: 0.5rem;\n}\n\n.md-button-circle-wrapper.call-control-button {\n background-color: var(--mds-color-theme-button-secondary-normal);\n border: 1px solid var(--mds-color-theme-outline-button-normal);\n}\n.md-button-circle-wrapper.call-control-button:hover, .md-button-circle-wrapper.call-control-button.hover {\n background-color: var(--mds-color-theme-button-secondary-hover);\n}\n\n.md-button-circle-wrapper.call-control-button-cancel {\n background-color: var(--mds-color-theme-button-cancel-normal);\n border: 0.0625rem solid var(--mds-color-theme-background-secondary-normal);\n}\n.md-button-circle-wrapper.call-control-button-cancel:hover, .md-button-circle-wrapper.call-control-button-cancel.hover {\n background-color: var(--mds-color-theme-button-cancel-hover);\n}\n\n.call-control-button-icon {\n --mdc-icon-fill-color: var(--mds--color-theme-button-secondary-normal);\n}\n\n.wrapup-button {\n display: inline-flex;\n justify-content: center;\n width: 8rem;\n background-color: var(--mds-color-theme-button-secondary-normal);\n border: 0.0625rem solid var(--mds-color-theme-outline-button-normal);\n color: var(--mds-color-theme-text-primary-normal);\n}\n.wrapup-button:hover, .wrapup-button.hover {\n background-color: var(--mds-color-theme-button-secondary-normal);\n color: var(--mds-color-theme-text-primary-normal);\n}\n\n.agent-popover .agent-popover-content {\n display: flex;\n flex-direction: column;\n padding: 1rem 0.5rem 0.5rem 1rem;\n width: 30rem;\n height: 25rem;\n gap: 0.25rem;\n}\n.agent-popover .agent-popover-content .agent-popover-title {\n margin: 0 0 0 0;\n margin-bottom: 1rem;\n text-align: left;\n}\n.agent-popover .agent-popover-content .agent-agent-item {\n padding: 0.5rem;\n cursor: pointer;\n border-radius: 0.25rem;\n}\n.agent-popover .agent-popover-content .agent-agent-item:hover {\n background-color: var(--mds-color-theme-background-secondary-hover);\n}\n.agent-popover .agent-tablist {\n margin-bottom: 1rem;\n}\n.agent-popover .agent-tablist .agent-tab {\n margin: 0 !important;\n}\n.agent-popover .agent-agent-list {\n margin-left: 0;\n margin-bottom: 1rem;\n}\n\n.call-control-list-item .hover-button {\n opacity: 0;\n transition: opacity 0.3s;\n pointer-events: none;\n}\n\n.call-control-list-item:hover .hover-button {\n opacity: 1;\n pointer-events: auto;\n}\n\n.custom-text {\n margin: 0 !important;\n line-height: 1 !important;\n}`, \"\"]);\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://@webex/cc-components/./src/components/task/CallControl/call-control.styles.scss?../../../node_modules/css-loader/dist/cjs.js!../../../node_modules/sass-loader/dist/cjs.js");
1739
1739
 
1740
1740
  /***/ }),
1741
1741
 
@@ -1981,6 +1981,28 @@ eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\n\n\n
1981
1981
 
1982
1982
  /***/ }),
1983
1983
 
1984
+ /***/ "./src/components/task/CallControl/CallControlCustom/consult-transfer-list-item.tsx":
1985
+ /*!******************************************************************************************!*\
1986
+ !*** ./src/components/task/CallControl/CallControlCustom/consult-transfer-list-item.tsx ***!
1987
+ \******************************************************************************************/
1988
+ /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
1989
+
1990
+ "use strict";
1991
+ eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst react_1 = __importDefault(__webpack_require__(/*! react */ \"react\"));\nconst react_collaboration_1 = __webpack_require__(/*! @momentum-ui/react-collaboration */ \"@momentum-ui/react-collaboration\");\nconst react_2 = __webpack_require__(/*! @momentum-design/components/dist/react */ \"../../../node_modules/@momentum-design/components/dist/react/index.js\");\nconst classnames_1 = __importDefault(__webpack_require__(/*! classnames */ \"../../../node_modules/classnames/index.js\"));\nconst ConsultTransferListComponent = (props) => {\n const { title, subtitle, buttonIcon, onButtonPress, className } = props;\n const initials = title\n .split(' ')\n .map((word) => word[0])\n .join('')\n .slice(0, 2)\n .toUpperCase();\n return (react_1.default.createElement(react_collaboration_1.ListItemBase, { className: (0, classnames_1.default)('call-control-list-item', className), size: 50, isPadded: true, \"aria-label\": title },\n react_1.default.createElement(react_collaboration_1.ListItemBaseSection, { position: \"start\" },\n react_1.default.createElement(react_collaboration_1.AvatarNext, { size: 32, initials: initials, title: title })),\n react_1.default.createElement(react_collaboration_1.ListItemBaseSection, { position: \"middle\", style: {\n flex: 1,\n display: 'flex',\n flexDirection: 'column',\n marginLeft: '8px',\n minWidth: 0,\n overflow: 'hidden',\n } },\n react_1.default.createElement(react_collaboration_1.Text, { tagName: \"p\", type: \"body-primary\", style: { margin: 0, lineHeight: '1.2' } }, title),\n subtitle && (react_1.default.createElement(react_collaboration_1.Text, { tagName: \"p\", type: \"body-secondary\", style: { margin: 0, lineHeight: '1.2' } }, subtitle))),\n react_1.default.createElement(react_collaboration_1.ListItemBaseSection, { position: \"end\" },\n react_1.default.createElement(\"div\", { className: \"hover-button\" },\n react_1.default.createElement(react_collaboration_1.ButtonCircle, { onPress: onButtonPress, size: 28, color: \"join\" },\n react_1.default.createElement(react_2.Icon, { name: buttonIcon }))))));\n};\nexports[\"default\"] = ConsultTransferListComponent;\n\n\n//# sourceURL=webpack://@webex/cc-components/./src/components/task/CallControl/CallControlCustom/consult-transfer-list-item.tsx?");
1992
+
1993
+ /***/ }),
1994
+
1995
+ /***/ "./src/components/task/CallControl/CallControlCustom/consult-transfer-popover.tsx":
1996
+ /*!****************************************************************************************!*\
1997
+ !*** ./src/components/task/CallControl/CallControlCustom/consult-transfer-popover.tsx ***!
1998
+ \****************************************************************************************/
1999
+ /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
2000
+
2001
+ "use strict";
2002
+ eval("\nvar __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n var desc = Object.getOwnPropertyDescriptor(m, k);\n if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\n desc = { enumerable: true, get: function() { return m[k]; } };\n }\n Object.defineProperty(o, k2, desc);\n}) : (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n o[k2] = m[k];\n}));\nvar __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {\n Object.defineProperty(o, \"default\", { enumerable: true, value: v });\n}) : function(o, v) {\n o[\"default\"] = v;\n});\nvar __importStar = (this && this.__importStar) || function (mod) {\n if (mod && mod.__esModule) return mod;\n var result = {};\n if (mod != null) for (var k in mod) if (k !== \"default\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);\n __setModuleDefault(result, mod);\n return result;\n};\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst react_1 = __importStar(__webpack_require__(/*! react */ \"react\"));\nconst react_collaboration_1 = __webpack_require__(/*! @momentum-ui/react-collaboration */ \"@momentum-ui/react-collaboration\");\nconst consult_transfer_list_item_1 = __importDefault(__webpack_require__(/*! ./consult-transfer-list-item */ \"./src/components/task/CallControl/CallControlCustom/consult-transfer-list-item.tsx\"));\nconst ConsultTransferPopoverComponent = ({ heading, buttonIcon, buddyAgents, onAgentSelect, }) => {\n const [selectedTab, setSelectedTab] = (0, react_1.useState)('Agents');\n const filteredAgents = buddyAgents;\n return (react_1.default.createElement(\"div\", { className: \"agent-popover-content\" },\n react_1.default.createElement(react_collaboration_1.Text, { tagName: \"h3\", className: \"agent-popover-title\", type: \"body-large-bold\", style: { margin: '0 0 0 0' } }, heading),\n react_1.default.createElement(react_collaboration_1.TabListNext, { \"aria-label\": \"Tabs\", className: \"agent-tablist\", hasBackground: false, style: { marginTop: '0' }, onTabSelection: (key) => setSelectedTab(key) },\n react_1.default.createElement(react_collaboration_1.TabNext, { key: \"Agents\", className: \"agent-tab\", active: selectedTab === 'Agents' }, \"Agents\")),\n react_1.default.createElement(react_collaboration_1.ListNext, { listSize: filteredAgents.length, className: \"agent-agent-list\" }, filteredAgents.map((agent) => (react_1.default.createElement(\"div\", { key: agent.agentId, onMouseDown: (e) => e.stopPropagation(), style: { cursor: 'pointer', pointerEvents: 'auto' } },\n react_1.default.createElement(consult_transfer_list_item_1.default, { title: agent.agentName, buttonIcon: buttonIcon, onButtonPress: () => onAgentSelect(agent.agentId) }))))),\n filteredAgents.length === 0 && (react_1.default.createElement(react_collaboration_1.Text, { tagName: \"small\", type: \"body-secondary\" }, \"No agents found\"))));\n};\nexports[\"default\"] = ConsultTransferPopoverComponent;\n\n\n//# sourceURL=webpack://@webex/cc-components/./src/components/task/CallControl/CallControlCustom/consult-transfer-popover.tsx?");
2003
+
2004
+ /***/ }),
2005
+
1984
2006
  /***/ "./src/components/task/CallControl/call-control.tsx":
1985
2007
  /*!**********************************************************!*\
1986
2008
  !*** ./src/components/task/CallControl/call-control.tsx ***!
@@ -1988,7 +2010,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\n\n\n
1988
2010
  /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
1989
2011
 
1990
2012
  "use strict";
1991
- eval("\nvar __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n var desc = Object.getOwnPropertyDescriptor(m, k);\n if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\n desc = { enumerable: true, get: function() { return m[k]; } };\n }\n Object.defineProperty(o, k2, desc);\n}) : (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n o[k2] = m[k];\n}));\nvar __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {\n Object.defineProperty(o, \"default\", { enumerable: true, value: v });\n}) : function(o, v) {\n o[\"default\"] = v;\n});\nvar __importStar = (this && this.__importStar) || function (mod) {\n if (mod && mod.__esModule) return mod;\n var result = {};\n if (mod != null) for (var k in mod) if (k !== \"default\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);\n __setModuleDefault(result, mod);\n return result;\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst react_1 = __importStar(__webpack_require__(/*! react */ \"react\"));\n__webpack_require__(/*! ./call-control.styles.scss */ \"./src/components/task/CallControl/call-control.styles.scss\");\nconst react_collaboration_1 = __webpack_require__(/*! @momentum-ui/react-collaboration */ \"@momentum-ui/react-collaboration\");\nconst collections_1 = __webpack_require__(/*! @react-stately/collections */ \"../../../node_modules/@react-stately/collections/dist/main.js\");\nconst react_2 = __webpack_require__(/*! @momentum-design/components/dist/react */ \"../../../node_modules/@momentum-design/components/dist/react/index.js\");\nfunction CallControlComponent(props) {\n const [selectedWrapupReason, setSelectedWrapupReason] = (0, react_1.useState)(null);\n const [selectedWrapupId, setSelectedWrapupId] = (0, react_1.useState)(null);\n const { currentTask, audioRef, toggleHold, toggleRecording, endCall, wrapupCall, wrapupCodes, wrapupRequired, isHeld, setIsHeld, isRecording, setIsRecording, } = props;\n (0, react_1.useEffect)(() => {\n if (!currentTask || !currentTask.data || !currentTask.data.interaction)\n return;\n const { interaction, mediaResourceId } = currentTask.data;\n const { media, callProcessingDetails } = interaction;\n const isHold = media && media[mediaResourceId] && media[mediaResourceId].isHold;\n setIsHeld(isHold);\n if (callProcessingDetails) {\n const { isPaused } = callProcessingDetails;\n setIsRecording(!isPaused);\n }\n }, [currentTask]);\n const handletoggleHold = () => {\n toggleHold(!isHeld);\n setIsHeld(!isHeld);\n };\n const handleWrapupCall = () => {\n if (selectedWrapupReason && selectedWrapupId) {\n wrapupCall(selectedWrapupReason, selectedWrapupId);\n setSelectedWrapupReason(null);\n setSelectedWrapupId(null);\n }\n };\n const handleWrapupChange = (text, value) => {\n setSelectedWrapupReason(text);\n setSelectedWrapupId(value);\n };\n const buttons = [\n {\n icon: isHeld ? 'play-bold' : 'pause-bold',\n onClick: () => handletoggleHold(),\n tooltip: isHeld ? 'Resume the call' : 'Hold the call',\n className: 'call-control-button',\n disabled: false,\n },\n {\n icon: isRecording ? 'record-paused-bold' : 'record-bold',\n onClick: () => toggleRecording(),\n tooltip: isRecording ? 'Pause Recording' : 'Resume Recording',\n className: 'call-control-button',\n disabled: false,\n },\n {\n icon: 'cancel-regular',\n onClick: endCall,\n tooltip: 'End call',\n className: 'call-control-button-cancel',\n disabled: isHeld,\n },\n ];\n if (!currentTask)\n return null;\n return (react_1.default.createElement(react_1.default.Fragment, null,\n react_1.default.createElement(\"audio\", { ref: audioRef, id: \"remote-audio\", autoPlay: true }),\n react_1.default.createElement(\"div\", { className: \"call-control-container\", \"data-testid\": \"call-control-container\" },\n !wrapupRequired && (react_1.default.createElement(\"div\", { className: \"button-group\" }, buttons.map((button, index) => (react_1.default.createElement(react_collaboration_1.TooltipNext, { key: index, color: \"primary\", delay: [0, 0], placement: \"bottom-start\", triggerComponent: react_1.default.createElement(react_collaboration_1.ButtonCircle, { className: button.className, onPress: button.onClick, disabled: button.disabled },\n react_1.default.createElement(react_2.Icon, { className: button.className + '-icon', name: button.icon })), type: \"description\", variant: \"small\", className: \"tooltip\" },\n react_1.default.createElement(\"p\", null, button.tooltip)))))),\n wrapupRequired && (react_1.default.createElement(\"div\", { className: \"wrapup-group\" },\n react_1.default.createElement(react_collaboration_1.PopoverNext, { color: \"primary\", delay: [0, 0], placement: \"bottom-start\", showArrow: true, trigger: \"click\", triggerComponent: react_1.default.createElement(react_collaboration_1.ButtonPill, { className: \"wrapup-button\" },\n \"Wrap up\",\n react_1.default.createElement(react_2.Icon, { name: \"arrow-down-bold\" })), variant: \"medium\", interactive: true, offsetDistance: 2, className: \"wrapup-popover\" },\n react_1.default.createElement(react_collaboration_1.Text, { className: \"wrapup-header\", tagName: 'small', type: \"body-large-bold\" }, \"Wrap-up Interaction\"),\n react_1.default.createElement(react_collaboration_1.Text, { className: \"wrapup-header\", tagName: 'small', type: \"body-secondary\" }, \"Wrap-up reason\"),\n react_1.default.createElement(react_collaboration_1.SelectNext, { \"aria-label\": \"wrapup-reason\", className: \"wrapup-select\", onSelectionChange: (key) => {\n const selectedItem = wrapupCodes === null || wrapupCodes === void 0 ? void 0 : wrapupCodes.find((code) => code.id === key);\n handleWrapupChange(selectedItem.name, selectedItem.id);\n }, items: wrapupCodes, showBorder: false, placeholder: \"Select\" }, (item) => (react_1.default.createElement(collections_1.Item, { key: item.id, textValue: item.name },\n react_1.default.createElement(react_collaboration_1.Text, { className: \"wrapup-name\", tagName: 'small' }, item.name)))),\n react_1.default.createElement(react_2.Icon, { className: \"wrapup-select-arrow-icon\", name: \"arrow-down-bold\", title: \"\" }),\n react_1.default.createElement(react_collaboration_1.ButtonPill, { className: \"submit-wrapup-button\", onPress: handleWrapupCall, disabled: selectedWrapupId && selectedWrapupReason ? false : true }, \"Submit & Wrap up\")))))));\n}\nexports[\"default\"] = CallControlComponent;\n\n\n//# sourceURL=webpack://@webex/cc-components/./src/components/task/CallControl/call-control.tsx?");
2013
+ eval("\nvar __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n var desc = Object.getOwnPropertyDescriptor(m, k);\n if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\n desc = { enumerable: true, get: function() { return m[k]; } };\n }\n Object.defineProperty(o, k2, desc);\n}) : (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n o[k2] = m[k];\n}));\nvar __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {\n Object.defineProperty(o, \"default\", { enumerable: true, value: v });\n}) : function(o, v) {\n o[\"default\"] = v;\n});\nvar __importStar = (this && this.__importStar) || function (mod) {\n if (mod && mod.__esModule) return mod;\n var result = {};\n if (mod != null) for (var k in mod) if (k !== \"default\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);\n __setModuleDefault(result, mod);\n return result;\n};\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst react_1 = __importStar(__webpack_require__(/*! react */ \"react\"));\n__webpack_require__(/*! ./call-control.styles.scss */ \"./src/components/task/CallControl/call-control.styles.scss\");\nconst react_collaboration_1 = __webpack_require__(/*! @momentum-ui/react-collaboration */ \"@momentum-ui/react-collaboration\");\nconst collections_1 = __webpack_require__(/*! @react-stately/collections */ \"../../../node_modules/@react-stately/collections/dist/main.js\");\nconst react_2 = __webpack_require__(/*! @momentum-design/components/dist/react */ \"../../../node_modules/@momentum-design/components/dist/react/index.js\");\nconst consult_transfer_popover_1 = __importDefault(__webpack_require__(/*! ./CallControlCustom/consult-transfer-popover */ \"./src/components/task/CallControl/CallControlCustom/consult-transfer-popover.tsx\"));\nfunction CallControlComponent(props) {\n const [selectedWrapupReason, setSelectedWrapupReason] = (0, react_1.useState)(null);\n const [selectedWrapupId, setSelectedWrapupId] = (0, react_1.useState)(null);\n const [showAgentMenu, setShowAgentMenu] = (0, react_1.useState)(false);\n const [agentMenuType, setAgentMenuType] = (0, react_1.useState)(null);\n const { currentTask, audioRef, toggleHold, toggleRecording, endCall, wrapupCall, wrapupCodes, wrapupRequired, isHeld, setIsHeld, isRecording, setIsRecording, buddyAgents, loadBuddyAgents, transferCall, consultCall, } = props;\n (0, react_1.useEffect)(() => {\n if (!currentTask || !currentTask.data || !currentTask.data.interaction)\n return;\n const { interaction, mediaResourceId } = currentTask.data;\n const { media, callProcessingDetails } = interaction;\n const isHold = media && media[mediaResourceId] && media[mediaResourceId].isHold;\n setIsHeld(isHold);\n if (callProcessingDetails) {\n const { isPaused } = callProcessingDetails;\n setIsRecording(!isPaused);\n }\n }, [currentTask]);\n const handletoggleHold = () => {\n toggleHold(!isHeld);\n setIsHeld(!isHeld);\n };\n const handleWrapupCall = () => {\n if (selectedWrapupReason && selectedWrapupId) {\n wrapupCall(selectedWrapupReason, selectedWrapupId);\n setSelectedWrapupReason(null);\n setSelectedWrapupId(null);\n }\n };\n const handleWrapupChange = (text, value) => {\n setSelectedWrapupReason(text);\n setSelectedWrapupId(value);\n };\n const buttons = [\n {\n icon: isHeld ? 'play-bold' : 'pause-bold',\n onClick: () => handletoggleHold(),\n tooltip: isHeld ? 'Resume the call' : 'Hold the call',\n className: 'call-control-button',\n disabled: false,\n },\n {\n icon: 'headset-bold',\n tooltip: 'Consult with another agent',\n className: 'call-control-button',\n disabled: false,\n menuType: 'Consult',\n },\n {\n icon: 'next-bold',\n tooltip: 'Transfer call',\n className: 'call-control-button',\n disabled: false,\n menuType: 'Transfer',\n },\n {\n icon: isRecording ? 'record-paused-bold' : 'record-bold',\n onClick: () => toggleRecording(),\n tooltip: isRecording ? 'Pause Recording' : 'Resume Recording',\n className: 'call-control-button',\n disabled: false,\n },\n {\n icon: 'cancel-regular',\n onClick: endCall,\n tooltip: 'End call',\n className: 'call-control-button-cancel',\n disabled: isHeld,\n },\n ];\n if (!currentTask)\n return null;\n return (react_1.default.createElement(react_1.default.Fragment, null,\n react_1.default.createElement(\"audio\", { ref: audioRef, id: \"remote-audio\", autoPlay: true }),\n react_1.default.createElement(\"div\", { className: \"call-control-container\", \"data-testid\": \"call-control-container\" },\n !wrapupRequired && (react_1.default.createElement(\"div\", { className: \"button-group\" }, buttons.map((button, index) => {\n if (button.menuType) {\n return (react_1.default.createElement(react_collaboration_1.PopoverNext, { key: index, onHide: () => {\n setShowAgentMenu(false);\n setAgentMenuType(null);\n }, color: \"primary\", delay: [0, 0], placement: \"bottom\", showArrow: true, variant: \"medium\", interactive: true, offsetDistance: 2, className: \"agent-popover\", trigger: \"click\", closeButtonPlacement: \"top-right\", closeButtonProps: {\n 'aria-label': 'Close popover',\n onPress: () => {\n setShowAgentMenu(false);\n setAgentMenuType(null);\n },\n outline: true,\n }, triggerComponent: react_1.default.createElement(react_collaboration_1.TooltipNext, { key: index, triggerComponent: react_1.default.createElement(react_collaboration_1.ButtonCircle, { className: button.className, \"aria-label\": button.tooltip, disabled: button.disabled, \"data-testid\": \"ButtonCircle\", onPress: () => {\n // If popover is already visible, we close it\n if (showAgentMenu && agentMenuType === button.menuType) {\n setShowAgentMenu(false);\n setAgentMenuType(null);\n }\n else {\n setAgentMenuType(button.menuType);\n setShowAgentMenu(true);\n loadBuddyAgents();\n }\n } },\n react_1.default.createElement(react_2.Icon, { className: button.className + '-icon', name: button.icon })), color: \"primary\", delay: [0, 0], placement: \"bottom-start\", type: \"description\", variant: \"small\", className: \"tooltip\" },\n react_1.default.createElement(\"p\", null, button.tooltip)) }, showAgentMenu && agentMenuType === button.menuType ? (react_1.default.createElement(consult_transfer_popover_1.default, { heading: button.menuType, buttonIcon: button.icon, buddyAgents: buddyAgents, onAgentSelect: (agentId) => {\n setShowAgentMenu(false);\n if (agentMenuType === 'Consult') {\n consultCall();\n }\n else {\n // Adding agent for now by default, will update once we have queues\n transferCall(agentId, 'agent');\n }\n setAgentMenuType(null);\n } })) : null));\n }\n return (react_1.default.createElement(react_collaboration_1.TooltipNext, { key: index, triggerComponent: react_1.default.createElement(react_collaboration_1.ButtonCircle, { className: button.className, onPress: button.onClick, disabled: button.disabled, \"aria-label\": button.tooltip },\n react_1.default.createElement(react_2.Icon, { className: button.className + '-icon', name: button.icon })), color: \"primary\", delay: [0, 0], placement: \"bottom-start\", type: \"description\", variant: \"small\", className: \"tooltip\" },\n react_1.default.createElement(\"p\", null, button.tooltip)));\n }))),\n wrapupRequired && (react_1.default.createElement(\"div\", { className: \"wrapup-group\" },\n react_1.default.createElement(react_collaboration_1.PopoverNext, { color: \"primary\", delay: [0, 0], placement: \"bottom-start\", showArrow: true, trigger: \"click\", triggerComponent: react_1.default.createElement(react_collaboration_1.ButtonPill, { className: \"wrapup-button\" },\n \"Wrap up\",\n react_1.default.createElement(react_2.Icon, { name: \"arrow-down-bold\" })), variant: \"medium\", interactive: true, offsetDistance: 2, className: \"wrapup-popover\" },\n react_1.default.createElement(react_collaboration_1.Text, { className: \"wrapup-header\", tagName: 'small', type: \"body-large-bold\" }, \"Wrap-up Interaction\"),\n react_1.default.createElement(react_collaboration_1.Text, { className: \"wrapup-header\", tagName: 'small', type: \"body-secondary\" }, \"Wrap-up reason\"),\n react_1.default.createElement(react_collaboration_1.SelectNext, { \"aria-label\": \"wrapup-reason\", className: \"wrapup-select\", onSelectionChange: (key) => {\n const selectedItem = wrapupCodes === null || wrapupCodes === void 0 ? void 0 : wrapupCodes.find((code) => code.id === key);\n handleWrapupChange(selectedItem.name, selectedItem.id);\n }, items: wrapupCodes, showBorder: false, placeholder: \"Select\" }, (item) => (react_1.default.createElement(collections_1.Item, { key: item.id, textValue: item.name },\n react_1.default.createElement(react_collaboration_1.Text, { className: \"wrapup-name\", tagName: 'small' }, item.name)))),\n react_1.default.createElement(react_2.Icon, { className: \"wrapup-select-arrow-icon\", name: \"arrow-down-bold\", title: \"\" }),\n react_1.default.createElement(react_collaboration_1.ButtonPill, { className: \"submit-wrapup-button\", onPress: handleWrapupCall, disabled: selectedWrapupId && selectedWrapupReason ? false : true, \"aria-label\": \"Submit wrap-up\" }, \"Submit & Wrap up\")))))));\n}\nexports[\"default\"] = CallControlComponent;\n\n\n//# sourceURL=webpack://@webex/cc-components/./src/components/task/CallControl/call-control.tsx?");
1992
2014
 
1993
2015
  /***/ }),
1994
2016
 
@@ -2102,6 +2124,16 @@ module.exports = require("react");
2102
2124
 
2103
2125
  /***/ }),
2104
2126
 
2127
+ /***/ "../../../node_modules/classnames/index.js":
2128
+ /*!*************************************************!*\
2129
+ !*** ../../../node_modules/classnames/index.js ***!
2130
+ \*************************************************/
2131
+ /***/ ((module, exports) => {
2132
+
2133
+ eval("var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/*!\n\tCopyright (c) 2018 Jed Watson.\n\tLicensed under the MIT License (MIT), see\n\thttp://jedwatson.github.io/classnames\n*/\n/* global define */\n\n(function () {\n\t'use strict';\n\n\tvar hasOwn = {}.hasOwnProperty;\n\n\tfunction classNames () {\n\t\tvar classes = '';\n\n\t\tfor (var i = 0; i < arguments.length; i++) {\n\t\t\tvar arg = arguments[i];\n\t\t\tif (arg) {\n\t\t\t\tclasses = appendClass(classes, parseValue(arg));\n\t\t\t}\n\t\t}\n\n\t\treturn classes;\n\t}\n\n\tfunction parseValue (arg) {\n\t\tif (typeof arg === 'string' || typeof arg === 'number') {\n\t\t\treturn arg;\n\t\t}\n\n\t\tif (typeof arg !== 'object') {\n\t\t\treturn '';\n\t\t}\n\n\t\tif (Array.isArray(arg)) {\n\t\t\treturn classNames.apply(null, arg);\n\t\t}\n\n\t\tif (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {\n\t\t\treturn arg.toString();\n\t\t}\n\n\t\tvar classes = '';\n\n\t\tfor (var key in arg) {\n\t\t\tif (hasOwn.call(arg, key) && arg[key]) {\n\t\t\t\tclasses = appendClass(classes, key);\n\t\t\t}\n\t\t}\n\n\t\treturn classes;\n\t}\n\n\tfunction appendClass (value, newClass) {\n\t\tif (!newClass) {\n\t\t\treturn value;\n\t\t}\n\t\n\t\tif (value) {\n\t\t\treturn value + ' ' + newClass;\n\t\t}\n\t\n\t\treturn value + newClass;\n\t}\n\n\tif ( true && module.exports) {\n\t\tclassNames.default = classNames;\n\t\tmodule.exports = classNames;\n\t} else if (true) {\n\t\t// register as 'classnames', consistent with npm package name\n\t\t!(__WEBPACK_AMD_DEFINE_ARRAY__ = [], __WEBPACK_AMD_DEFINE_RESULT__ = (function () {\n\t\t\treturn classNames;\n\t\t}).apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__),\n\t\t__WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));\n\t} else {}\n}());\n\n\n//# sourceURL=webpack://@webex/cc-components/../../../node_modules/classnames/index.js?");
2134
+
2135
+ /***/ }),
2136
+
2105
2137
  /***/ "../../../node_modules/@lit/context/development/index.js":
2106
2138
  /*!***************************************************************!*\
2107
2139
  !*** ../../../node_modules/@lit/context/development/index.js ***!
package/dist/types/components/task/CallControl/CallControlCustom/consult-transfer-list-item.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ import React from 'react';
2
+ import { ConsultTransferListComponentProps } from '../../task.types';
3
+ declare const ConsultTransferListComponent: React.FC<ConsultTransferListComponentProps>;
4
+ export default ConsultTransferListComponent;
package/dist/types/components/task/CallControl/CallControlCustom/consult-transfer-popover.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ import React from 'react';
2
+ import { ConsultTransferPopoverComponentProps } from '../../task.types';
3
+ declare const ConsultTransferPopoverComponent: React.FC<ConsultTransferPopoverComponentProps>;
4
+ export default ConsultTransferPopoverComponent;
package/dist/types/components/task/task.types.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { ILogger, ITask, IContactCenter, WrapupCodes } from '@webex/cc-store';
1
+ import { ILogger, ITask, IContactCenter, WrapupCodes, BuddyDetails, DestinationType } from '@webex/cc-store';
2
2
  /**
3
3
  * Interface representing the TaskProps of a user.
4
4
  */
@@ -155,8 +155,26 @@ export interface ControlProps {
155
155
  * @param isRecording - Boolean indicating whether the task is being recorded.
156
156
  */
157
157
  setIsRecording: (isRecording: boolean) => void;
158
+ /**
159
+ * List of buddy agents available for consult
160
+ */
161
+ buddyAgents: BuddyDetails[];
162
+ /**
163
+ * Function to load buddy agents
164
+ */
165
+ loadBuddyAgents: () => Promise<void>;
166
+ /**
167
+ * Function to transfer the call to a destination.
168
+ * @param destination - The destination to transfer the call to.
169
+ * @param destinationType - The type of destination.
170
+ */
171
+ transferCall: (destination: string, destinationType: DestinationType) => void;
172
+ /**
173
+ * Function to consult with a buddy agent.
174
+ */
175
+ consultCall: () => void;
158
176
  }
159
- export type CallControlComponentProps = Pick<ControlProps, 'currentTask' | 'audioRef' | 'wrapupCodes' | 'wrapupRequired' | 'toggleHold' | 'toggleRecording' | 'endCall' | 'wrapupCall' | 'isHeld' | 'setIsHeld' | 'isRecording' | 'setIsRecording'>;
177
+ export type CallControlComponentProps = Pick<ControlProps, 'currentTask' | 'audioRef' | 'wrapupCodes' | 'wrapupRequired' | 'toggleHold' | 'toggleRecording' | 'endCall' | 'wrapupCall' | 'isHeld' | 'setIsHeld' | 'isRecording' | 'setIsRecording' | 'buddyAgents' | 'loadBuddyAgents' | 'transferCall' | 'consultCall'>;
160
178
  /**
161
179
  * Interface representing the properties for OutdialCall component.
162
180
  */
@@ -175,3 +193,26 @@ export interface OutdialCallProps {
175
193
  logger: ILogger;
176
194
  }
177
195
  export type OutdialCallComponentProps = Pick<OutdialCallProps, 'startOutdial'>;
196
+ /**
197
+ * Interface representing the properties for CallControlListItem component.
198
+ */
199
+ export interface ConsultTransferListComponentProps {
200
+ title: string;
201
+ subtitle?: string;
202
+ buttonIcon: string;
203
+ onButtonPress: () => void;
204
+ className?: string;
205
+ }
206
+ /**
207
+ * Interface representing the properties for ConsultTransferPopover component.
208
+ */
209
+ export interface ConsultTransferPopoverComponentProps {
210
+ heading: string;
211
+ buttonIcon: string;
212
+ buddyAgents: Array<{
213
+ agentId: string;
214
+ agentName: string;
215
+ dn: string;
216
+ }>;
217
+ onAgentSelect: (agentId: string) => void;
218
+ }
package/dist/wc.js CHANGED
@@ -1735,7 +1735,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
1735
1735
  /***/ ((module, __webpack_exports__, __webpack_require__) => {
1736
1736
 
1737
1737
  "use strict";
1738
- eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../../../../../node_modules/css-loader/dist/runtime/noSourceMaps.js */ \"../../../node_modules/css-loader/dist/runtime/noSourceMaps.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../../../../../node_modules/css-loader/dist/runtime/api.js */ \"../../../node_modules/css-loader/dist/runtime/api.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);\n// Imports\n\n\nvar ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, `.tooltip.md-modal-container-wrapper {\n color: var(--mds-color-theme-inverted-text-primary-normal);\n background-color: var(--mds-color-theme-inverted-background-normal) !important;\n}\n\n.tooltip .md-modal-container-arrow-wrapper .md-modal-arrow-svg path {\n fill: var(--mds-color-theme-inverted-background-normal) !important;\n}\n\n.call-control-container {\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n}\n.call-control-container .md-select-dropdown-input {\n flex-grow: 1;\n display: flex;\n border: 0.0625rem;\n align-self: flex-start;\n}\n\n.button-group {\n display: flex;\n gap: 0.5rem; /* Reduced gap between buttons/tooltips */\n margin-top: 1rem;\n}\n\n.wrapup-group {\n display: flex;\n flex-direction: column;\n gap: 0.5rem; /* Reduced gap between select and button */\n margin-top: 1rem;\n}\n\n.wrapup-name {\n color: var(--mds-color-theme-text-primary-normal);\n}\n\n.wrapup-select {\n flex-grow: 1;\n padding: 0.5rem;\n margin-top: 0.5rem;\n margin-bottom: 0.75rem;\n border: 0.0625rem solid #ccc;\n border-radius: 0.25rem;\n align-self: flex-start;\n}\n\n.wrapup-select-arrow-icon {\n position: absolute;\n right: 1.5rem; /* Adjusted to leave space for the arrow icon */\n top: 55%;\n transform: translateY(-50%);\n display: flex;\n align-items: center;\n pointer-events: none;\n z-index: 1;\n}\n\n.submit-wrapup-button {\n align-self: flex-end;\n}\n\n.wrapup-header {\n margin-bottom: 0.7rem;\n align-self: flex-start;\n}\n\n.md-select-wrapper {\n display: flex;\n align-items: flex-start;\n flex-direction: column;\n border: 0;\n}\n\n[id*=tippy] {\n border: 0.0625rem solid var(--mds-color-theme-outline-input-normal);\n background-color: var(--mds-color-theme-background-glass-overlay-normal);\n border-radius: 0.5rem;\n}\n\n.md-button-circle-wrapper.call-control-button {\n background-color: var(--mds-color-theme-button-secondary-normal);\n border: 1px solid var(--mds-color-theme-outline-button-normal);\n}\n.md-button-circle-wrapper.call-control-button:hover, .md-button-circle-wrapper.call-control-button.hover {\n background-color: var(--mds-color-theme-button-secondary-hover);\n}\n\n.md-button-circle-wrapper.call-control-button-cancel {\n background-color: var(--mds-color-theme-button-cancel-normal);\n border: 0.0625rem solid var(--mds-color-theme-background-secondary-normal);\n}\n.md-button-circle-wrapper.call-control-button-cancel:hover, .md-button-circle-wrapper.call-control-button-cancel.hover {\n background-color: var(--mds-color-theme-button-cancel-hover);\n}\n\n.call-control-button-icon {\n --mdc-icon-fill-color: var(--mds--color-theme-button-secondary-normal);\n}\n\n.wrapup-button {\n display: inline-flex;\n justify-content: center;\n width: 8rem;\n background-color: var(--mds-color-theme-button-secondary-normal);\n border: 0.0625rem solid var(--mds-color-theme-outline-button-normal);\n color: var(--mds-color-theme-text-primary-normal);\n}\n.wrapup-button:hover, .wrapup-button.hover {\n background-color: var(--mds-color-theme-button-secondary-normal);\n color: var(--mds-color-theme-text-primary-normal);\n}`, \"\"]);\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://@webex/cc-components/./src/components/task/CallControl/call-control.styles.scss?../../../node_modules/css-loader/dist/cjs.js!../../../node_modules/sass-loader/dist/cjs.js");
1738
+ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../../../../../node_modules/css-loader/dist/runtime/noSourceMaps.js */ \"../../../node_modules/css-loader/dist/runtime/noSourceMaps.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../../../../../node_modules/css-loader/dist/runtime/api.js */ \"../../../node_modules/css-loader/dist/runtime/api.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);\n// Imports\n\n\nvar ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, `.tooltip.md-modal-container-wrapper {\n color: var(--mds-color-theme-inverted-text-primary-normal);\n background-color: var(--mds-color-theme-inverted-background-normal) !important;\n}\n\n.tooltip .md-modal-container-arrow-wrapper .md-modal-arrow-svg path {\n fill: var(--mds-color-theme-inverted-background-normal) !important;\n}\n\n.call-control-container {\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n}\n.call-control-container .md-select-dropdown-input {\n flex-grow: 1;\n display: flex;\n border: 0.0625rem;\n align-self: flex-start;\n}\n\n.button-group {\n display: flex;\n gap: 0.5rem; /* Reduced gap between buttons/tooltips */\n margin-top: 1rem;\n}\n\n.wrapup-group {\n display: flex;\n flex-direction: column;\n gap: 0.5rem; /* Reduced gap between select and button */\n margin-top: 1rem;\n}\n\n.wrapup-name {\n color: var(--mds-color-theme-text-primary-normal);\n}\n\n.wrapup-select {\n flex-grow: 1;\n padding: 0.5rem;\n margin-top: 0.5rem;\n margin-bottom: 0.75rem;\n border: 0.0625rem solid #ccc;\n border-radius: 0.25rem;\n align-self: flex-start;\n}\n\n.wrapup-select-arrow-icon {\n position: absolute;\n right: 1.5rem; /* Adjusted to leave space for the arrow icon */\n top: 55%;\n transform: translateY(-50%);\n display: flex;\n align-items: center;\n pointer-events: none;\n z-index: 1;\n}\n\n.submit-wrapup-button {\n align-self: flex-end;\n}\n\n.wrapup-header {\n margin-bottom: 0.7rem;\n align-self: flex-start;\n}\n\n.md-select-wrapper {\n display: flex;\n align-items: flex-start;\n flex-direction: column;\n border: 0;\n}\n\n[id*=tippy] {\n border: 0.0625rem solid var(--mds-color-theme-outline-input-normal);\n background-color: var(--mds-color-theme-background-glass-overlay-normal);\n border-radius: 0.5rem;\n}\n\n.md-button-circle-wrapper.call-control-button {\n background-color: var(--mds-color-theme-button-secondary-normal);\n border: 1px solid var(--mds-color-theme-outline-button-normal);\n}\n.md-button-circle-wrapper.call-control-button:hover, .md-button-circle-wrapper.call-control-button.hover {\n background-color: var(--mds-color-theme-button-secondary-hover);\n}\n\n.md-button-circle-wrapper.call-control-button-cancel {\n background-color: var(--mds-color-theme-button-cancel-normal);\n border: 0.0625rem solid var(--mds-color-theme-background-secondary-normal);\n}\n.md-button-circle-wrapper.call-control-button-cancel:hover, .md-button-circle-wrapper.call-control-button-cancel.hover {\n background-color: var(--mds-color-theme-button-cancel-hover);\n}\n\n.call-control-button-icon {\n --mdc-icon-fill-color: var(--mds--color-theme-button-secondary-normal);\n}\n\n.wrapup-button {\n display: inline-flex;\n justify-content: center;\n width: 8rem;\n background-color: var(--mds-color-theme-button-secondary-normal);\n border: 0.0625rem solid var(--mds-color-theme-outline-button-normal);\n color: var(--mds-color-theme-text-primary-normal);\n}\n.wrapup-button:hover, .wrapup-button.hover {\n background-color: var(--mds-color-theme-button-secondary-normal);\n color: var(--mds-color-theme-text-primary-normal);\n}\n\n.agent-popover .agent-popover-content {\n display: flex;\n flex-direction: column;\n padding: 1rem 0.5rem 0.5rem 1rem;\n width: 30rem;\n height: 25rem;\n gap: 0.25rem;\n}\n.agent-popover .agent-popover-content .agent-popover-title {\n margin: 0 0 0 0;\n margin-bottom: 1rem;\n text-align: left;\n}\n.agent-popover .agent-popover-content .agent-agent-item {\n padding: 0.5rem;\n cursor: pointer;\n border-radius: 0.25rem;\n}\n.agent-popover .agent-popover-content .agent-agent-item:hover {\n background-color: var(--mds-color-theme-background-secondary-hover);\n}\n.agent-popover .agent-tablist {\n margin-bottom: 1rem;\n}\n.agent-popover .agent-tablist .agent-tab {\n margin: 0 !important;\n}\n.agent-popover .agent-agent-list {\n margin-left: 0;\n margin-bottom: 1rem;\n}\n\n.call-control-list-item .hover-button {\n opacity: 0;\n transition: opacity 0.3s;\n pointer-events: none;\n}\n\n.call-control-list-item:hover .hover-button {\n opacity: 1;\n pointer-events: auto;\n}\n\n.custom-text {\n margin: 0 !important;\n line-height: 1 !important;\n}`, \"\"]);\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://@webex/cc-components/./src/components/task/CallControl/call-control.styles.scss?../../../node_modules/css-loader/dist/cjs.js!../../../node_modules/sass-loader/dist/cjs.js");
1739
1739
 
1740
1740
  /***/ }),
1741
1741
 
@@ -1970,6 +1970,28 @@ eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {
1970
1970
 
1971
1971
  /***/ }),
1972
1972
 
1973
+ /***/ "./src/components/task/CallControl/CallControlCustom/consult-transfer-list-item.tsx":
1974
+ /*!******************************************************************************************!*\
1975
+ !*** ./src/components/task/CallControl/CallControlCustom/consult-transfer-list-item.tsx ***!
1976
+ \******************************************************************************************/
1977
+ /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
1978
+
1979
+ "use strict";
1980
+ eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst react_1 = __importDefault(__webpack_require__(/*! react */ \"react\"));\nconst react_collaboration_1 = __webpack_require__(/*! @momentum-ui/react-collaboration */ \"@momentum-ui/react-collaboration\");\nconst react_2 = __webpack_require__(/*! @momentum-design/components/dist/react */ \"../../../node_modules/@momentum-design/components/dist/react/index.js\");\nconst classnames_1 = __importDefault(__webpack_require__(/*! classnames */ \"../../../node_modules/classnames/index.js\"));\nconst ConsultTransferListComponent = (props) => {\n const { title, subtitle, buttonIcon, onButtonPress, className } = props;\n const initials = title\n .split(' ')\n .map((word) => word[0])\n .join('')\n .slice(0, 2)\n .toUpperCase();\n return (react_1.default.createElement(react_collaboration_1.ListItemBase, { className: (0, classnames_1.default)('call-control-list-item', className), size: 50, isPadded: true, \"aria-label\": title },\n react_1.default.createElement(react_collaboration_1.ListItemBaseSection, { position: \"start\" },\n react_1.default.createElement(react_collaboration_1.AvatarNext, { size: 32, initials: initials, title: title })),\n react_1.default.createElement(react_collaboration_1.ListItemBaseSection, { position: \"middle\", style: {\n flex: 1,\n display: 'flex',\n flexDirection: 'column',\n marginLeft: '8px',\n minWidth: 0,\n overflow: 'hidden',\n } },\n react_1.default.createElement(react_collaboration_1.Text, { tagName: \"p\", type: \"body-primary\", style: { margin: 0, lineHeight: '1.2' } }, title),\n subtitle && (react_1.default.createElement(react_collaboration_1.Text, { tagName: \"p\", type: \"body-secondary\", style: { margin: 0, lineHeight: '1.2' } }, subtitle))),\n react_1.default.createElement(react_collaboration_1.ListItemBaseSection, { position: \"end\" },\n react_1.default.createElement(\"div\", { className: \"hover-button\" },\n react_1.default.createElement(react_collaboration_1.ButtonCircle, { onPress: onButtonPress, size: 28, color: \"join\" },\n react_1.default.createElement(react_2.Icon, { name: buttonIcon }))))));\n};\nexports[\"default\"] = ConsultTransferListComponent;\n\n\n//# sourceURL=webpack://@webex/cc-components/./src/components/task/CallControl/CallControlCustom/consult-transfer-list-item.tsx?");
1981
+
1982
+ /***/ }),
1983
+
1984
+ /***/ "./src/components/task/CallControl/CallControlCustom/consult-transfer-popover.tsx":
1985
+ /*!****************************************************************************************!*\
1986
+ !*** ./src/components/task/CallControl/CallControlCustom/consult-transfer-popover.tsx ***!
1987
+ \****************************************************************************************/
1988
+ /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
1989
+
1990
+ "use strict";
1991
+ eval("\nvar __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n var desc = Object.getOwnPropertyDescriptor(m, k);\n if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\n desc = { enumerable: true, get: function() { return m[k]; } };\n }\n Object.defineProperty(o, k2, desc);\n}) : (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n o[k2] = m[k];\n}));\nvar __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {\n Object.defineProperty(o, \"default\", { enumerable: true, value: v });\n}) : function(o, v) {\n o[\"default\"] = v;\n});\nvar __importStar = (this && this.__importStar) || function (mod) {\n if (mod && mod.__esModule) return mod;\n var result = {};\n if (mod != null) for (var k in mod) if (k !== \"default\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);\n __setModuleDefault(result, mod);\n return result;\n};\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst react_1 = __importStar(__webpack_require__(/*! react */ \"react\"));\nconst react_collaboration_1 = __webpack_require__(/*! @momentum-ui/react-collaboration */ \"@momentum-ui/react-collaboration\");\nconst consult_transfer_list_item_1 = __importDefault(__webpack_require__(/*! ./consult-transfer-list-item */ \"./src/components/task/CallControl/CallControlCustom/consult-transfer-list-item.tsx\"));\nconst ConsultTransferPopoverComponent = ({ heading, buttonIcon, buddyAgents, onAgentSelect, }) => {\n const [selectedTab, setSelectedTab] = (0, react_1.useState)('Agents');\n const filteredAgents = buddyAgents;\n return (react_1.default.createElement(\"div\", { className: \"agent-popover-content\" },\n react_1.default.createElement(react_collaboration_1.Text, { tagName: \"h3\", className: \"agent-popover-title\", type: \"body-large-bold\", style: { margin: '0 0 0 0' } }, heading),\n react_1.default.createElement(react_collaboration_1.TabListNext, { \"aria-label\": \"Tabs\", className: \"agent-tablist\", hasBackground: false, style: { marginTop: '0' }, onTabSelection: (key) => setSelectedTab(key) },\n react_1.default.createElement(react_collaboration_1.TabNext, { key: \"Agents\", className: \"agent-tab\", active: selectedTab === 'Agents' }, \"Agents\")),\n react_1.default.createElement(react_collaboration_1.ListNext, { listSize: filteredAgents.length, className: \"agent-agent-list\" }, filteredAgents.map((agent) => (react_1.default.createElement(\"div\", { key: agent.agentId, onMouseDown: (e) => e.stopPropagation(), style: { cursor: 'pointer', pointerEvents: 'auto' } },\n react_1.default.createElement(consult_transfer_list_item_1.default, { title: agent.agentName, buttonIcon: buttonIcon, onButtonPress: () => onAgentSelect(agent.agentId) }))))),\n filteredAgents.length === 0 && (react_1.default.createElement(react_collaboration_1.Text, { tagName: \"small\", type: \"body-secondary\" }, \"No agents found\"))));\n};\nexports[\"default\"] = ConsultTransferPopoverComponent;\n\n\n//# sourceURL=webpack://@webex/cc-components/./src/components/task/CallControl/CallControlCustom/consult-transfer-popover.tsx?");
1992
+
1993
+ /***/ }),
1994
+
1973
1995
  /***/ "./src/components/task/CallControl/call-control.tsx":
1974
1996
  /*!**********************************************************!*\
1975
1997
  !*** ./src/components/task/CallControl/call-control.tsx ***!
@@ -1977,7 +1999,7 @@ eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {
1977
1999
  /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
1978
2000
 
1979
2001
  "use strict";
1980
- eval("\nvar __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n var desc = Object.getOwnPropertyDescriptor(m, k);\n if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\n desc = { enumerable: true, get: function() { return m[k]; } };\n }\n Object.defineProperty(o, k2, desc);\n}) : (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n o[k2] = m[k];\n}));\nvar __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {\n Object.defineProperty(o, \"default\", { enumerable: true, value: v });\n}) : function(o, v) {\n o[\"default\"] = v;\n});\nvar __importStar = (this && this.__importStar) || function (mod) {\n if (mod && mod.__esModule) return mod;\n var result = {};\n if (mod != null) for (var k in mod) if (k !== \"default\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);\n __setModuleDefault(result, mod);\n return result;\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst react_1 = __importStar(__webpack_require__(/*! react */ \"react\"));\n__webpack_require__(/*! ./call-control.styles.scss */ \"./src/components/task/CallControl/call-control.styles.scss\");\nconst react_collaboration_1 = __webpack_require__(/*! @momentum-ui/react-collaboration */ \"@momentum-ui/react-collaboration\");\nconst collections_1 = __webpack_require__(/*! @react-stately/collections */ \"../../../node_modules/@react-stately/collections/dist/main.js\");\nconst react_2 = __webpack_require__(/*! @momentum-design/components/dist/react */ \"../../../node_modules/@momentum-design/components/dist/react/index.js\");\nfunction CallControlComponent(props) {\n const [selectedWrapupReason, setSelectedWrapupReason] = (0, react_1.useState)(null);\n const [selectedWrapupId, setSelectedWrapupId] = (0, react_1.useState)(null);\n const { currentTask, audioRef, toggleHold, toggleRecording, endCall, wrapupCall, wrapupCodes, wrapupRequired, isHeld, setIsHeld, isRecording, setIsRecording, } = props;\n (0, react_1.useEffect)(() => {\n if (!currentTask || !currentTask.data || !currentTask.data.interaction)\n return;\n const { interaction, mediaResourceId } = currentTask.data;\n const { media, callProcessingDetails } = interaction;\n const isHold = media && media[mediaResourceId] && media[mediaResourceId].isHold;\n setIsHeld(isHold);\n if (callProcessingDetails) {\n const { isPaused } = callProcessingDetails;\n setIsRecording(!isPaused);\n }\n }, [currentTask]);\n const handletoggleHold = () => {\n toggleHold(!isHeld);\n setIsHeld(!isHeld);\n };\n const handleWrapupCall = () => {\n if (selectedWrapupReason && selectedWrapupId) {\n wrapupCall(selectedWrapupReason, selectedWrapupId);\n setSelectedWrapupReason(null);\n setSelectedWrapupId(null);\n }\n };\n const handleWrapupChange = (text, value) => {\n setSelectedWrapupReason(text);\n setSelectedWrapupId(value);\n };\n const buttons = [\n {\n icon: isHeld ? 'play-bold' : 'pause-bold',\n onClick: () => handletoggleHold(),\n tooltip: isHeld ? 'Resume the call' : 'Hold the call',\n className: 'call-control-button',\n disabled: false,\n },\n {\n icon: isRecording ? 'record-paused-bold' : 'record-bold',\n onClick: () => toggleRecording(),\n tooltip: isRecording ? 'Pause Recording' : 'Resume Recording',\n className: 'call-control-button',\n disabled: false,\n },\n {\n icon: 'cancel-regular',\n onClick: endCall,\n tooltip: 'End call',\n className: 'call-control-button-cancel',\n disabled: isHeld,\n },\n ];\n if (!currentTask)\n return null;\n return (react_1.default.createElement(react_1.default.Fragment, null,\n react_1.default.createElement(\"audio\", { ref: audioRef, id: \"remote-audio\", autoPlay: true }),\n react_1.default.createElement(\"div\", { className: \"call-control-container\", \"data-testid\": \"call-control-container\" },\n !wrapupRequired && (react_1.default.createElement(\"div\", { className: \"button-group\" }, buttons.map((button, index) => (react_1.default.createElement(react_collaboration_1.TooltipNext, { key: index, color: \"primary\", delay: [0, 0], placement: \"bottom-start\", triggerComponent: react_1.default.createElement(react_collaboration_1.ButtonCircle, { className: button.className, onPress: button.onClick, disabled: button.disabled },\n react_1.default.createElement(react_2.Icon, { className: button.className + '-icon', name: button.icon })), type: \"description\", variant: \"small\", className: \"tooltip\" },\n react_1.default.createElement(\"p\", null, button.tooltip)))))),\n wrapupRequired && (react_1.default.createElement(\"div\", { className: \"wrapup-group\" },\n react_1.default.createElement(react_collaboration_1.PopoverNext, { color: \"primary\", delay: [0, 0], placement: \"bottom-start\", showArrow: true, trigger: \"click\", triggerComponent: react_1.default.createElement(react_collaboration_1.ButtonPill, { className: \"wrapup-button\" },\n \"Wrap up\",\n react_1.default.createElement(react_2.Icon, { name: \"arrow-down-bold\" })), variant: \"medium\", interactive: true, offsetDistance: 2, className: \"wrapup-popover\" },\n react_1.default.createElement(react_collaboration_1.Text, { className: \"wrapup-header\", tagName: 'small', type: \"body-large-bold\" }, \"Wrap-up Interaction\"),\n react_1.default.createElement(react_collaboration_1.Text, { className: \"wrapup-header\", tagName: 'small', type: \"body-secondary\" }, \"Wrap-up reason\"),\n react_1.default.createElement(react_collaboration_1.SelectNext, { \"aria-label\": \"wrapup-reason\", className: \"wrapup-select\", onSelectionChange: (key) => {\n const selectedItem = wrapupCodes === null || wrapupCodes === void 0 ? void 0 : wrapupCodes.find((code) => code.id === key);\n handleWrapupChange(selectedItem.name, selectedItem.id);\n }, items: wrapupCodes, showBorder: false, placeholder: \"Select\" }, (item) => (react_1.default.createElement(collections_1.Item, { key: item.id, textValue: item.name },\n react_1.default.createElement(react_collaboration_1.Text, { className: \"wrapup-name\", tagName: 'small' }, item.name)))),\n react_1.default.createElement(react_2.Icon, { className: \"wrapup-select-arrow-icon\", name: \"arrow-down-bold\", title: \"\" }),\n react_1.default.createElement(react_collaboration_1.ButtonPill, { className: \"submit-wrapup-button\", onPress: handleWrapupCall, disabled: selectedWrapupId && selectedWrapupReason ? false : true }, \"Submit & Wrap up\")))))));\n}\nexports[\"default\"] = CallControlComponent;\n\n\n//# sourceURL=webpack://@webex/cc-components/./src/components/task/CallControl/call-control.tsx?");
2002
+ eval("\nvar __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n var desc = Object.getOwnPropertyDescriptor(m, k);\n if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\n desc = { enumerable: true, get: function() { return m[k]; } };\n }\n Object.defineProperty(o, k2, desc);\n}) : (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n o[k2] = m[k];\n}));\nvar __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {\n Object.defineProperty(o, \"default\", { enumerable: true, value: v });\n}) : function(o, v) {\n o[\"default\"] = v;\n});\nvar __importStar = (this && this.__importStar) || function (mod) {\n if (mod && mod.__esModule) return mod;\n var result = {};\n if (mod != null) for (var k in mod) if (k !== \"default\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);\n __setModuleDefault(result, mod);\n return result;\n};\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst react_1 = __importStar(__webpack_require__(/*! react */ \"react\"));\n__webpack_require__(/*! ./call-control.styles.scss */ \"./src/components/task/CallControl/call-control.styles.scss\");\nconst react_collaboration_1 = __webpack_require__(/*! @momentum-ui/react-collaboration */ \"@momentum-ui/react-collaboration\");\nconst collections_1 = __webpack_require__(/*! @react-stately/collections */ \"../../../node_modules/@react-stately/collections/dist/main.js\");\nconst react_2 = __webpack_require__(/*! @momentum-design/components/dist/react */ \"../../../node_modules/@momentum-design/components/dist/react/index.js\");\nconst consult_transfer_popover_1 = __importDefault(__webpack_require__(/*! ./CallControlCustom/consult-transfer-popover */ \"./src/components/task/CallControl/CallControlCustom/consult-transfer-popover.tsx\"));\nfunction CallControlComponent(props) {\n const [selectedWrapupReason, setSelectedWrapupReason] = (0, react_1.useState)(null);\n const [selectedWrapupId, setSelectedWrapupId] = (0, react_1.useState)(null);\n const [showAgentMenu, setShowAgentMenu] = (0, react_1.useState)(false);\n const [agentMenuType, setAgentMenuType] = (0, react_1.useState)(null);\n const { currentTask, audioRef, toggleHold, toggleRecording, endCall, wrapupCall, wrapupCodes, wrapupRequired, isHeld, setIsHeld, isRecording, setIsRecording, buddyAgents, loadBuddyAgents, transferCall, consultCall, } = props;\n (0, react_1.useEffect)(() => {\n if (!currentTask || !currentTask.data || !currentTask.data.interaction)\n return;\n const { interaction, mediaResourceId } = currentTask.data;\n const { media, callProcessingDetails } = interaction;\n const isHold = media && media[mediaResourceId] && media[mediaResourceId].isHold;\n setIsHeld(isHold);\n if (callProcessingDetails) {\n const { isPaused } = callProcessingDetails;\n setIsRecording(!isPaused);\n }\n }, [currentTask]);\n const handletoggleHold = () => {\n toggleHold(!isHeld);\n setIsHeld(!isHeld);\n };\n const handleWrapupCall = () => {\n if (selectedWrapupReason && selectedWrapupId) {\n wrapupCall(selectedWrapupReason, selectedWrapupId);\n setSelectedWrapupReason(null);\n setSelectedWrapupId(null);\n }\n };\n const handleWrapupChange = (text, value) => {\n setSelectedWrapupReason(text);\n setSelectedWrapupId(value);\n };\n const buttons = [\n {\n icon: isHeld ? 'play-bold' : 'pause-bold',\n onClick: () => handletoggleHold(),\n tooltip: isHeld ? 'Resume the call' : 'Hold the call',\n className: 'call-control-button',\n disabled: false,\n },\n {\n icon: 'headset-bold',\n tooltip: 'Consult with another agent',\n className: 'call-control-button',\n disabled: false,\n menuType: 'Consult',\n },\n {\n icon: 'next-bold',\n tooltip: 'Transfer call',\n className: 'call-control-button',\n disabled: false,\n menuType: 'Transfer',\n },\n {\n icon: isRecording ? 'record-paused-bold' : 'record-bold',\n onClick: () => toggleRecording(),\n tooltip: isRecording ? 'Pause Recording' : 'Resume Recording',\n className: 'call-control-button',\n disabled: false,\n },\n {\n icon: 'cancel-regular',\n onClick: endCall,\n tooltip: 'End call',\n className: 'call-control-button-cancel',\n disabled: isHeld,\n },\n ];\n if (!currentTask)\n return null;\n return (react_1.default.createElement(react_1.default.Fragment, null,\n react_1.default.createElement(\"audio\", { ref: audioRef, id: \"remote-audio\", autoPlay: true }),\n react_1.default.createElement(\"div\", { className: \"call-control-container\", \"data-testid\": \"call-control-container\" },\n !wrapupRequired && (react_1.default.createElement(\"div\", { className: \"button-group\" }, buttons.map((button, index) => {\n if (button.menuType) {\n return (react_1.default.createElement(react_collaboration_1.PopoverNext, { key: index, onHide: () => {\n setShowAgentMenu(false);\n setAgentMenuType(null);\n }, color: \"primary\", delay: [0, 0], placement: \"bottom\", showArrow: true, variant: \"medium\", interactive: true, offsetDistance: 2, className: \"agent-popover\", trigger: \"click\", closeButtonPlacement: \"top-right\", closeButtonProps: {\n 'aria-label': 'Close popover',\n onPress: () => {\n setShowAgentMenu(false);\n setAgentMenuType(null);\n },\n outline: true,\n }, triggerComponent: react_1.default.createElement(react_collaboration_1.TooltipNext, { key: index, triggerComponent: react_1.default.createElement(react_collaboration_1.ButtonCircle, { className: button.className, \"aria-label\": button.tooltip, disabled: button.disabled, \"data-testid\": \"ButtonCircle\", onPress: () => {\n // If popover is already visible, we close it\n if (showAgentMenu && agentMenuType === button.menuType) {\n setShowAgentMenu(false);\n setAgentMenuType(null);\n }\n else {\n setAgentMenuType(button.menuType);\n setShowAgentMenu(true);\n loadBuddyAgents();\n }\n } },\n react_1.default.createElement(react_2.Icon, { className: button.className + '-icon', name: button.icon })), color: \"primary\", delay: [0, 0], placement: \"bottom-start\", type: \"description\", variant: \"small\", className: \"tooltip\" },\n react_1.default.createElement(\"p\", null, button.tooltip)) }, showAgentMenu && agentMenuType === button.menuType ? (react_1.default.createElement(consult_transfer_popover_1.default, { heading: button.menuType, buttonIcon: button.icon, buddyAgents: buddyAgents, onAgentSelect: (agentId) => {\n setShowAgentMenu(false);\n if (agentMenuType === 'Consult') {\n consultCall();\n }\n else {\n // Adding agent for now by default, will update once we have queues\n transferCall(agentId, 'agent');\n }\n setAgentMenuType(null);\n } })) : null));\n }\n return (react_1.default.createElement(react_collaboration_1.TooltipNext, { key: index, triggerComponent: react_1.default.createElement(react_collaboration_1.ButtonCircle, { className: button.className, onPress: button.onClick, disabled: button.disabled, \"aria-label\": button.tooltip },\n react_1.default.createElement(react_2.Icon, { className: button.className + '-icon', name: button.icon })), color: \"primary\", delay: [0, 0], placement: \"bottom-start\", type: \"description\", variant: \"small\", className: \"tooltip\" },\n react_1.default.createElement(\"p\", null, button.tooltip)));\n }))),\n wrapupRequired && (react_1.default.createElement(\"div\", { className: \"wrapup-group\" },\n react_1.default.createElement(react_collaboration_1.PopoverNext, { color: \"primary\", delay: [0, 0], placement: \"bottom-start\", showArrow: true, trigger: \"click\", triggerComponent: react_1.default.createElement(react_collaboration_1.ButtonPill, { className: \"wrapup-button\" },\n \"Wrap up\",\n react_1.default.createElement(react_2.Icon, { name: \"arrow-down-bold\" })), variant: \"medium\", interactive: true, offsetDistance: 2, className: \"wrapup-popover\" },\n react_1.default.createElement(react_collaboration_1.Text, { className: \"wrapup-header\", tagName: 'small', type: \"body-large-bold\" }, \"Wrap-up Interaction\"),\n react_1.default.createElement(react_collaboration_1.Text, { className: \"wrapup-header\", tagName: 'small', type: \"body-secondary\" }, \"Wrap-up reason\"),\n react_1.default.createElement(react_collaboration_1.SelectNext, { \"aria-label\": \"wrapup-reason\", className: \"wrapup-select\", onSelectionChange: (key) => {\n const selectedItem = wrapupCodes === null || wrapupCodes === void 0 ? void 0 : wrapupCodes.find((code) => code.id === key);\n handleWrapupChange(selectedItem.name, selectedItem.id);\n }, items: wrapupCodes, showBorder: false, placeholder: \"Select\" }, (item) => (react_1.default.createElement(collections_1.Item, { key: item.id, textValue: item.name },\n react_1.default.createElement(react_collaboration_1.Text, { className: \"wrapup-name\", tagName: 'small' }, item.name)))),\n react_1.default.createElement(react_2.Icon, { className: \"wrapup-select-arrow-icon\", name: \"arrow-down-bold\", title: \"\" }),\n react_1.default.createElement(react_collaboration_1.ButtonPill, { className: \"submit-wrapup-button\", onPress: handleWrapupCall, disabled: selectedWrapupId && selectedWrapupReason ? false : true, \"aria-label\": \"Submit wrap-up\" }, \"Submit & Wrap up\")))))));\n}\nexports[\"default\"] = CallControlComponent;\n\n\n//# sourceURL=webpack://@webex/cc-components/./src/components/task/CallControl/call-control.tsx?");
1981
2003
 
1982
2004
  /***/ }),
1983
2005
 
@@ -2113,6 +2135,16 @@ eval("const c=__webpack_require__(/*! react */ \"react\"),u=__webpack_require__(
2113
2135
 
2114
2136
  /***/ }),
2115
2137
 
2138
+ /***/ "../../../node_modules/classnames/index.js":
2139
+ /*!*************************************************!*\
2140
+ !*** ../../../node_modules/classnames/index.js ***!
2141
+ \*************************************************/
2142
+ /***/ ((module, exports) => {
2143
+
2144
+ eval("var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/*!\n\tCopyright (c) 2018 Jed Watson.\n\tLicensed under the MIT License (MIT), see\n\thttp://jedwatson.github.io/classnames\n*/\n/* global define */\n\n(function () {\n\t'use strict';\n\n\tvar hasOwn = {}.hasOwnProperty;\n\n\tfunction classNames () {\n\t\tvar classes = '';\n\n\t\tfor (var i = 0; i < arguments.length; i++) {\n\t\t\tvar arg = arguments[i];\n\t\t\tif (arg) {\n\t\t\t\tclasses = appendClass(classes, parseValue(arg));\n\t\t\t}\n\t\t}\n\n\t\treturn classes;\n\t}\n\n\tfunction parseValue (arg) {\n\t\tif (typeof arg === 'string' || typeof arg === 'number') {\n\t\t\treturn arg;\n\t\t}\n\n\t\tif (typeof arg !== 'object') {\n\t\t\treturn '';\n\t\t}\n\n\t\tif (Array.isArray(arg)) {\n\t\t\treturn classNames.apply(null, arg);\n\t\t}\n\n\t\tif (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {\n\t\t\treturn arg.toString();\n\t\t}\n\n\t\tvar classes = '';\n\n\t\tfor (var key in arg) {\n\t\t\tif (hasOwn.call(arg, key) && arg[key]) {\n\t\t\t\tclasses = appendClass(classes, key);\n\t\t\t}\n\t\t}\n\n\t\treturn classes;\n\t}\n\n\tfunction appendClass (value, newClass) {\n\t\tif (!newClass) {\n\t\t\treturn value;\n\t\t}\n\t\n\t\tif (value) {\n\t\t\treturn value + ' ' + newClass;\n\t\t}\n\t\n\t\treturn value + newClass;\n\t}\n\n\tif ( true && module.exports) {\n\t\tclassNames.default = classNames;\n\t\tmodule.exports = classNames;\n\t} else if (true) {\n\t\t// register as 'classnames', consistent with npm package name\n\t\t!(__WEBPACK_AMD_DEFINE_ARRAY__ = [], __WEBPACK_AMD_DEFINE_RESULT__ = (function () {\n\t\t\treturn classNames;\n\t\t}).apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__),\n\t\t__WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));\n\t} else {}\n}());\n\n\n//# sourceURL=webpack://@webex/cc-components/../../../node_modules/classnames/index.js?");
2145
+
2146
+ /***/ }),
2147
+
2116
2148
  /***/ "../../../node_modules/@lit/context/development/index.js":
2117
2149
  /*!***************************************************************!*\
2118
2150
  !*** ../../../node_modules/@lit/context/development/index.js ***!
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@webex/cc-components",
3
3
  "description": "Webex Contact Center UI Components Library for your custom contact center solutions",
4
- "version": "1.28.0-ccwidgets.38",
4
+ "version": "1.28.0-ccwidgets.39",
5
5
  "main": "dist/index.js",
6
6
  "publishConfig": {
7
7
  "access": "public"
@@ -25,7 +25,7 @@
25
25
  },
26
26
  "dependencies": {
27
27
  "@r2wc/react-to-web-component": "2.0.3",
28
- "@webex/cc-store": "1.28.0-ccwidgets.38"
28
+ "@webex/cc-store": "1.28.0-ccwidgets.39"
29
29
  },
30
30
  "devDependencies": {
31
31
  "@babel/core": "7.25.2",