@webex/cc-components 1.28.0-ccwidgets.54 → 1.28.0-ccwidgets.56

package/dist/index.js

@@ -2911,7 +2911,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-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  position: relative;\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  width: 1rem;\n  height: 1rem;\n  min-width: 2rem;\n  min-height: 2rem;\n  padding: 0.5rem;\n  border-radius: 50%;\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  width: 2rem;\n  height: 2rem;\n  min-width: 2rem;\n  min-height: 2rem;\n  padding: 0.5rem;\n  color: var(--mds-color-theme-inverted-text-primary-normal);\n  background-color: var(--mds-color-theme-button-cancel-normal);\n  border: 0.0625rem solid var(--mds-color-theme-background-secondary-normal);\n  border-radius: 50%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\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.md-button-circle-wrapper.call-control-consult-button-cancel {\n  background-color: var(--mds-color-theme-button-secondary-normal);\n  border: 0.0625rem solid var(--mds-color-theme-button-cancel-normal);\n}\n.md-button-circle-wrapper.call-control-consult-button-cancel:hover {\n  background-color: var(--mds-color-theme-button-secondary-hover);\n}\n\n.call-control-consult-button-cancel-icon {\n  --mdc-icon-fill-color: var(--mds-color-theme-button-cancel-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.agent-popover button.md-button-circle-wrapper.md-popover-close-button.md-button-simple-wrapper {\n  display: none;\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\n.call-control-consult .consult-sub-text {\n  margin-top: 0.25rem !important;\n}\n\n.consult-header {\n  display: flex;\n  align-content: center;\n  gap: 0.5rem;\n}\n\n.consult-agent-name {\n  line-height: 0;\n  margin-top: -8px;\n}\n\n.consult-buttons-container {\n  display: flex;\n  gap: 0.5rem;\n  justify-content: flex-start;\n}\n\n.task-avatar {\n  --mdc-avatar-default-background-color: var(--mds-color-theme-avatar-pressed);\n  --mdc-avatar-default-foreground-color: var(--mds-color-theme-indicator-stable);\n  margin-right: 0.25rem;\n}\n\n.md-button-circle-wrapper.call-control-button[disabled],\n.md-button-circle-wrapper.call-control-button.shallowDisabled,\n.md-button-circle-wrapper.call-control-button:disabled {\n  outline-color: var(--mds-color-theme-button-primary-disabled);\n  border-color: var(--mds-color-theme-button-primary-disabled);\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.cad-variables {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 1rem;\n  margin-top: 1.3rem;\n}\n.cad-variables .queue,\n.cad-variables .phone-number,\n.cad-variables .rona {\n  font-size: 1rem;\n  color: var(--mds-color-theme-text-primary-normal);\n}\n.cad-variables .queue strong,\n.cad-variables .phone-number strong,\n.cad-variables .rona strong {\n  font-weight: bold;\n}\n.cad-variables .queue span,\n.cad-variables .phone-number span,\n.cad-variables .rona span {\n  font-weight: 250;\n}\n\n/* On-hold chip styling */\n.on-hold {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0.2rem 0.6rem;\n  border-radius: 2rem;\n  background-color: var(--mds-color-theme-common-text-warning-hover);\n  font-size: 0.875rem;\n  font-weight: 500;\n}\n.on-hold .call-hold-filled-icon {\n  width: 1rem;\n  height: 1rem;\n  color: var(--mds-color-theme-avatar-yellow);\n}\n.on-hold .on-hold-chip-text {\n  color: var(--mds-color-theme-avatar-yellow);\n}\n\n.recording-indicator {\n  position: absolute;\n  top: 0.5rem;\n  right: 0.5rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 1.5rem;\n  height: 1.5rem;\n  color: var(--mds-color-theme-button-cancel-normal);\n  z-index: 10;\n}\n\n.dot {\n  color: var(--mds-color-theme-inverted-outline-button-normal);\n  font-size: 0.875rem;\n  display: inline;\n  filter: brightness(0.1);\n}\n\n.caller-info {\n  display: flex;\n  align-items: flex-start;\n  gap: 0.5rem;\n  margin-bottom: 1rem;\n}\n\n.customer-info {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n}\n\n.call-details {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n.call-status {\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n  flex-wrap: nowrap;\n}\n\n.call-icon-background {\n  width: 2.2rem;\n  height: 2.2rem;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-color: var(--mds-color-theme-background-secondary-normal);\n  border-radius: 50%;\n  margin-top: -0.25rem;\n  flex-shrink: 0;\n}\n.call-icon-background .call-icon {\n  color: var(--mds-color-theme-common-touchbar-background-green-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/CallControlCAD/call-control-cad.styles.scss?../../../node_modules/css-loader/dist/cjs.js!../../../node_modules/sass-loader/dist/cjs.js");
+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  position: relative;\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  width: 1rem;\n  height: 1rem;\n  min-width: 2rem;\n  min-height: 2rem;\n  padding: 0.5rem;\n  border-radius: 50%;\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  width: 2rem;\n  height: 2rem;\n  min-width: 2rem;\n  min-height: 2rem;\n  padding: 0.5rem;\n  color: var(--mds-color-theme-inverted-text-primary-normal);\n  background-color: var(--mds-color-theme-button-cancel-normal);\n  border: 0.0625rem solid var(--mds-color-theme-background-secondary-normal);\n  border-radius: 50%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\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.md-button-circle-wrapper.call-control-consult-button-cancel {\n  background-color: var(--mds-color-theme-button-secondary-normal);\n  border: 0.0625rem solid var(--mds-color-theme-button-cancel-normal);\n}\n.md-button-circle-wrapper.call-control-consult-button-cancel:hover {\n  background-color: var(--mds-color-theme-button-secondary-hover);\n}\n\n.call-control-consult-button-cancel-icon {\n  --mdc-icon-fill-color: var(--mds-color-theme-button-cancel-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.agent-popover button.md-button-circle-wrapper.md-popover-close-button.md-button-simple-wrapper {\n  display: none;\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\n.call-control-consult .consult-sub-text {\n  margin-top: 0.25rem !important;\n}\n\n.consult-header {\n  display: flex;\n  align-content: center;\n  gap: 0.5rem;\n}\n\n.consult-agent-name {\n  line-height: 0;\n  margin-top: -8px;\n}\n\n.consult-buttons-container {\n  display: flex;\n  gap: 0.5rem;\n  justify-content: flex-start;\n}\n\n.task-avatar {\n  --mdc-avatar-default-background-color: var(--mds-color-theme-avatar-pressed);\n  --mdc-avatar-default-foreground-color: var(--mds-color-theme-indicator-stable);\n  margin-right: 0.25rem;\n}\n\n.md-button-circle-wrapper.call-control-button[disabled],\n.md-button-circle-wrapper.call-control-button.shallowDisabled,\n.md-button-circle-wrapper.call-control-button:disabled {\n  outline-color: var(--mds-color-theme-button-primary-disabled);\n  border-color: var(--mds-color-theme-button-primary-disabled);\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.cad-variables {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 1rem;\n  margin-top: 1.3rem;\n}\n.cad-variables .queue,\n.cad-variables .phone-number,\n.cad-variables .rona {\n  font-size: 1rem;\n  color: var(--mds-color-theme-text-primary-normal);\n}\n.cad-variables .queue strong,\n.cad-variables .phone-number strong,\n.cad-variables .rona strong {\n  font-weight: bold;\n}\n.cad-variables .queue span,\n.cad-variables .phone-number span,\n.cad-variables .rona span {\n  font-weight: 250;\n}\n\n/* On-hold chip styling */\n.on-hold {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0.2rem 0.6rem;\n  border-radius: 2rem;\n  background-color: var(--mds-color-theme-common-text-warning-hover);\n  font-size: 0.875rem;\n  font-weight: 500;\n}\n.on-hold .call-hold-filled-icon {\n  width: 1rem;\n  height: 1rem;\n  color: var(--mds-color-theme-avatar-yellow);\n}\n.on-hold .on-hold-chip-text {\n  color: var(--mds-color-theme-avatar-yellow);\n}\n\n.recording-indicator {\n  position: absolute;\n  top: 0.5rem;\n  right: 0.5rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 1.5rem;\n  height: 1.5rem;\n  color: var(--mds-color-theme-button-cancel-normal);\n  z-index: 10;\n}\n\n.dot {\n  color: var(--mds-color-theme-inverted-outline-button-normal);\n  font-size: 0.875rem;\n  display: inline;\n  filter: brightness(0.1);\n}\n\n.caller-info {\n  display: flex;\n  align-items: flex-start;\n  gap: 0.5rem;\n  margin-bottom: 1rem;\n}\n\n.customer-info {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n}\n\n.call-details {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n.call-status {\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n  flex-wrap: nowrap;\n}\n\n.call-icon-background {\n  width: 2rem;\n  height: 2rem;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-color: var(--mds-color-theme-avatar-glass-normal);\n  border-radius: 50%;\n  flex-shrink: 0;\n}\n.call-icon-background .media-icon {\n  width: 1.25rem;\n  height: 1.25rem;\n}\n.call-icon-background .media-icon.telephony {\n  color: var(--mds-color-theme-indicator-stable);\n}\n.call-icon-background .media-icon.email {\n  color: var(--mds-color-theme-common-touchbar-background-violet-normal);\n}\n.call-icon-background .media-icon.chat {\n  color: var(--mds-color-theme-indicator-secure);\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/CallControlCAD/call-control-cad.styles.scss?../../../node_modules/css-loader/dist/cjs.js!../../../node_modules/sass-loader/dist/cjs.js");
 
 /***/ }),
 
@@ -2933,7 +2933,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-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, `:root {\n  --mds-color-theme-avatar-glass-normal: rgba(0, 0, 0, 0.07);\n}\n\n@media (prefers-color-scheme: dark) {\n  :root {\n    --mds-color-theme-avatar-glass-normal: rgba(255, 255, 255, 0.07);\n  }\n}\n.task-list-item {\n  display: flex;\n  padding: 0.5rem 0.75rem;\n  align-items: center;\n  align-self: stretch;\n  height: 5rem !important;\n}\n.task-list-item mdc-avatar {\n  --mdc-avatar-default-background-color: var(--mds-color-theme-avatar-glass-normal);\n  --mdc-avatar-default-foreground-color: var(--mds-color-theme-indicator-stable);\n}\n\n.task-text {\n  color: var(--mds-color-theme-text-secondary-normal);\n}\n\n.task-list-item--selected {\n  background: var(--mds-color-theme-background-primary-active);\n}\n.task-list-item--selected mdc-avatar {\n  --mdc-avatar-default-background-color: var(--mds-color-theme-avatar-glass-active, rgba(255, 255, 255, 0.8));\n}\n\n.task-button-container {\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n}\n\n.task-list-hover:hover {\n  background: none !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/Task/styles.scss?../../../node_modules/css-loader/dist/cjs.js!../../../node_modules/sass-loader/dist/cjs.js");
+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, `:root {\n  --mds-color-theme-avatar-glass-normal: rgba(0, 0, 0, 0.07);\n}\n\n@media (prefers-color-scheme: dark) {\n  :root {\n    --mds-color-theme-avatar-glass-normal: rgba(255, 255, 255, 0.07);\n  }\n}\n.task-list-item {\n  display: flex;\n  padding: 0.5rem 0.75rem;\n  align-items: center;\n  align-self: stretch;\n  height: 5rem !important;\n}\n.task-list-item mdc-avatar {\n  --mdc-avatar-default-background-color: var(--mds-color-theme-avatar-glass-normal);\n}\n.task-list-item mdc-avatar.telephony {\n  --mdc-avatar-default-foreground-color: var(--mds-color-theme-indicator-stable);\n}\n.task-list-item mdc-avatar.email {\n  --mdc-avatar-default-foreground-color: var(--mds-color-theme-common-touchbar-background-violet-normal);\n}\n.task-list-item mdc-avatar.chat {\n  --mdc-avatar-default-foreground-color: var(--mds-color-theme-indicator-secure);\n}\n.task-list-item .brand-visual-background {\n  width: 2rem;\n  height: 2rem;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-color: var(--mds-color-theme-avatar-glass-normal);\n  border-radius: 50%;\n  flex-shrink: 0;\n}\n.task-list-item .brand-visual-background mdc-brandvisual {\n  width: 1.25rem;\n  height: 1.25rem;\n}\n\n.task-text {\n  color: var(--mds-color-theme-text-secondary-normal);\n}\n\n.task-list-item--selected {\n  background: var(--mds-color-theme-background-primary-active);\n}\n.task-list-item--selected mdc-avatar {\n  --mdc-avatar-default-background-color: var(--mds-color-theme-avatar-glass-active, #FFFFFFCC);\n}\n.task-list-item--selected .brand-visual-background {\n  background-color: var(--mds-color-theme-avatar-glass-active, rgba(255, 255, 255, 0.8));\n}\n\n.task-button-container {\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n}\n\n.task-list-hover:hover {\n  background: none !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/Task/styles.scss?../../../node_modules/css-loader/dist/cjs.js!../../../node_modules/sass-loader/dist/cjs.js");
 
 /***/ }),
 
@@ -3208,7 +3208,7 @@ eval("\nvar __createBinding = (this && this.__createBinding) || (Object.create ?
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-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, toggleHold, toggleRecording, endCall, wrapupCall, wrapupCodes, isHeld, setIsHeld, isRecording, setIsRecording, buddyAgents, loadBuddyAgents, queues, loadQueues, transferCall, consultCall, consultInitiated, consultAccepted, callControlAudio, setConsultAgentName, setConsultAgentId, allowConsultToQueue, setLastTargetType, controlVisibility, } = 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 handleTargetSelect = (id, name, type) => {\n        if (agentMenuType === 'Consult') {\n            try {\n                consultCall(id, type);\n                setConsultAgentId(id);\n                setConsultAgentName(name);\n                setLastTargetType(type);\n            }\n            catch (error) {\n                throw new Error('Error during consult call', error);\n            }\n        }\n        else if (agentMenuType === 'Transfer') {\n            try {\n                transferCall(id, type);\n            }\n            catch (error) {\n                throw new Error('Error during transfer call', error);\n            }\n        }\n    };\n    const handlePopoverOpen = (menuType) => {\n        if (showAgentMenu && agentMenuType === menuType) {\n            setShowAgentMenu(false);\n            setAgentMenuType(null);\n        }\n        else {\n            setAgentMenuType(menuType);\n            setShowAgentMenu(true);\n            loadBuddyAgents();\n            loadQueues();\n        }\n    };\n    const buttons = [\n        {\n            id: 'hold',\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            isVisible: controlVisibility.holdResume,\n        },\n        {\n            id: 'consult',\n            icon: 'headset-bold',\n            tooltip: 'Consult with another agent',\n            className: 'call-control-button',\n            disabled: false,\n            menuType: 'Consult',\n            isVisible: controlVisibility.consult,\n        },\n        {\n            id: 'transfer',\n            icon: 'next-bold',\n            tooltip: 'Transfer call',\n            className: 'call-control-button',\n            disabled: false,\n            menuType: 'Transfer',\n            isVisible: controlVisibility.transfer,\n        },\n        {\n            id: 'record',\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            isVisible: controlVisibility.pauseResumeRecording,\n        },\n        {\n            id: 'end',\n            icon: 'cancel-regular',\n            onClick: endCall,\n            tooltip: 'End call',\n            className: 'call-control-button-cancel',\n            disabled: isHeld,\n            isVisible: controlVisibility.end,\n        },\n    ];\n    const filteredButtons = consultInitiated\n        ? buttons.filter((button) => !['hold', 'consult'].includes(button.id))\n        : buttons;\n    if (!currentTask)\n        return null;\n    return (react_1.default.createElement(react_1.default.Fragment, null,\n        react_1.default.createElement(\"audio\", { ref: (audioElement) => {\n                if (audioElement && callControlAudio) {\n                    audioElement.srcObject = callControlAudio;\n                }\n            }, id: \"remote-audio\", autoPlay: true }),\n        react_1.default.createElement(\"div\", { className: \"call-control-container\", \"data-testid\": \"call-control-container\" },\n            !consultAccepted && !controlVisibility.wrapup && (react_1.default.createElement(\"div\", { className: \"button-group\" }, filteredButtons.map((button, index) => {\n                if (!button.isVisible)\n                    return null;\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 || consultInitiated, \"data-testid\": \"ButtonCircle\", onPress: () => handlePopoverOpen(button.menuType) },\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, queues: queues, onAgentSelect: (agentId, agentName) => handleTargetSelect(agentId, agentName, 'agent'), onQueueSelect: (queueId, queueName) => handleTargetSelect(queueId, queueName, 'queue'), allowConsultToQueue: allowConsultToQueue })) : 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 || consultInitiated, \"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            controlVisibility.wrapup && (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?");
+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\"));\nconst utils_1 = __webpack_require__(/*! ../../../utils */ \"./src/utils/index.ts\");\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, toggleHold, toggleRecording, endCall, wrapupCall, wrapupCodes, isHeld, setIsHeld, isRecording, setIsRecording, buddyAgents, loadBuddyAgents, queues, loadQueues, transferCall, consultCall, consultInitiated, consultAccepted, callControlAudio, setConsultAgentName, setConsultAgentId, allowConsultToQueue, setLastTargetType, controlVisibility, } = 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 handleTargetSelect = (id, name, type) => {\n        if (agentMenuType === 'Consult') {\n            try {\n                consultCall(id, type);\n                setConsultAgentId(id);\n                setConsultAgentName(name);\n                setLastTargetType(type);\n            }\n            catch (error) {\n                throw new Error('Error during consult call', error);\n            }\n        }\n        else if (agentMenuType === 'Transfer') {\n            try {\n                transferCall(id, type);\n            }\n            catch (error) {\n                throw new Error('Error during transfer call', error);\n            }\n        }\n    };\n    const handlePopoverOpen = (menuType) => {\n        if (showAgentMenu && agentMenuType === menuType) {\n            setShowAgentMenu(false);\n            setAgentMenuType(null);\n        }\n        else {\n            setAgentMenuType(menuType);\n            setShowAgentMenu(true);\n            loadBuddyAgents();\n            loadQueues();\n        }\n    };\n    const currentMediaType = (0, utils_1.getMediaTypeInfo)(currentTask.data.interaction.mediaType, currentTask.data.interaction.mediaChannel);\n    const buttons = [\n        {\n            id: 'hold',\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            isVisible: controlVisibility.holdResume,\n        },\n        {\n            id: 'consult',\n            icon: 'headset-bold',\n            tooltip: 'Consult with another agent',\n            className: 'call-control-button',\n            disabled: false,\n            menuType: 'Consult',\n            isVisible: controlVisibility.consult,\n        },\n        {\n            id: 'transfer',\n            icon: 'next-bold',\n            tooltip: `Transfer ${currentMediaType.labelName}`,\n            className: 'call-control-button',\n            disabled: false,\n            menuType: 'Transfer',\n            isVisible: controlVisibility.transfer,\n        },\n        {\n            id: 'record',\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            isVisible: controlVisibility.pauseResumeRecording,\n        },\n        {\n            id: 'end',\n            icon: 'cancel-regular',\n            onClick: endCall,\n            tooltip: `End ${currentMediaType.labelName}`,\n            className: 'call-control-button-cancel',\n            disabled: isHeld,\n            isVisible: controlVisibility.end,\n        },\n    ];\n    const filteredButtons = consultInitiated\n        ? buttons.filter((button) => !['hold', 'consult'].includes(button.id))\n        : buttons;\n    if (!currentTask)\n        return null;\n    return (react_1.default.createElement(react_1.default.Fragment, null,\n        react_1.default.createElement(\"audio\", { ref: (audioElement) => {\n                if (audioElement && callControlAudio) {\n                    audioElement.srcObject = callControlAudio;\n                }\n            }, id: \"remote-audio\", autoPlay: true }),\n        react_1.default.createElement(\"div\", { className: \"call-control-container\", \"data-testid\": \"call-control-container\" },\n            !consultAccepted && !controlVisibility.wrapup && (react_1.default.createElement(\"div\", { className: \"button-group\" }, filteredButtons.map((button, index) => {\n                if (!button.isVisible)\n                    return null;\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 || consultInitiated, \"data-testid\": \"ButtonCircle\", onPress: () => handlePopoverOpen(button.menuType) },\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, queues: queues, onAgentSelect: (agentId, agentName) => handleTargetSelect(agentId, agentName, 'agent'), onQueueSelect: (queueId, queueName) => handleTargetSelect(queueId, queueName, 'queue'), allowConsultToQueue: allowConsultToQueue })) : 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 || consultInitiated, \"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            controlVisibility.wrapup && (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?");
 
 /***/ }),
 
@@ -3219,7 +3219,7 @@ eval("\nvar __createBinding = (this && this.__createBinding) || (Object.create ?
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-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 call_control_1 = __importDefault(__webpack_require__(/*! ../CallControl/call-control */ \"./src/components/task/CallControl/call-control.tsx\"));\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\");\n__webpack_require__(/*! ./call-control-cad.styles.scss */ \"./src/components/task/CallControlCAD/call-control-cad.styles.scss\");\nconst index_1 = __importDefault(__webpack_require__(/*! ../TaskTimer/index */ \"./src/components/task/TaskTimer/index.tsx\"));\nconst call_control_consult_1 = __importDefault(__webpack_require__(/*! ../CallControl/CallControlCustom/call-control-consult */ \"./src/components/task/CallControl/CallControlCustom/call-control-consult.tsx\"));\nconst CallControlCADComponent = (props) => {\n    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;\n    const { currentTask, isHeld, isRecording, holdTime, consultAccepted, consultInitiated, consultAgentName, consultStartTimeStamp, endConsultCall, consultAgentId, consultCompleted, consultTransfer, callControlClassName, callControlConsultClassName, startTimestamp, isEndConsultEnabled, lastTargetType, controlVisibility, } = props;\n    // Use the Web Worker-based hold timer\n    const formatTime = (time) => {\n        const minutes = Math.floor((time % 3600) / 60);\n        const seconds = time % 60;\n        return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;\n    };\n    if (!currentTask)\n        return null;\n    return (react_1.default.createElement(react_1.default.Fragment, null,\n        react_1.default.createElement(\"div\", { className: `call-control-container ${callControlClassName || ''}` },\n            react_1.default.createElement(\"div\", { className: \"caller-info\" },\n                react_1.default.createElement(\"div\", { className: \"call-icon-background\" },\n                    react_1.default.createElement(react_2.Icon, { name: \"handset-filled\", size: 1, className: \"call-icon\" })),\n                react_1.default.createElement(\"div\", { className: \"customer-info\" },\n                    react_1.default.createElement(react_collaboration_1.Text, { className: \"customer-id\", type: \"body-large-bold\", tagName: 'small' }, ((_c = (_b = (_a = currentTask === null || currentTask === void 0 ? void 0 : currentTask.data) === null || _a === void 0 ? void 0 : _a.interaction) === null || _b === void 0 ? void 0 : _b.callAssociatedDetails) === null || _c === void 0 ? void 0 : _c.ani) || 'No Caller ID'),\n                    react_1.default.createElement(\"div\", { className: \"call-details\" },\n                        react_1.default.createElement(react_collaboration_1.Text, { className: \"call-timer\", type: \"body-secondary\", tagName: 'small' },\n                            \"Call - \",\n                            react_1.default.createElement(index_1.default, { startTimeStamp: startTimestamp })),\n                        react_1.default.createElement(\"div\", { className: \"call-status\" }, !controlVisibility.wrapup && isHeld && (react_1.default.createElement(react_1.default.Fragment, null,\n                            react_1.default.createElement(\"span\", { className: \"dot\" }, \"\\u2022\"),\n                            react_1.default.createElement(\"div\", { className: \"on-hold\" },\n                                react_1.default.createElement(react_2.Icon, { name: \"call-hold-filled\", size: 1, className: \"call-hold-filled-icon\" }),\n                                react_1.default.createElement(\"span\", { className: \"on-hold-chip-text\" },\n                                    \"On hold - \",\n                                    formatTime(holdTime))))))))),\n            !controlVisibility.wrapup && controlVisibility.recordingIndicator && (react_1.default.createElement(\"div\", { className: \"recording-indicator\" },\n                react_1.default.createElement(react_2.Icon, { name: isRecording ? 'record-active-badge-filled' : 'record-paused-badge-filled', size: 1.3 }))),\n            react_1.default.createElement(call_control_1.default, Object.assign({}, props)),\n            react_1.default.createElement(\"div\", { className: \"cad-variables\" },\n                react_1.default.createElement(react_collaboration_1.Text, { className: \"queue\", type: \"body-secondary\", tagName: 'small' },\n                    react_1.default.createElement(\"strong\", null, \"Queue:\"),\n                    ' ',\n                    react_1.default.createElement(\"span\", null, ((_f = (_e = (_d = currentTask === null || currentTask === void 0 ? void 0 : currentTask.data) === null || _d === void 0 ? void 0 : _d.interaction) === null || _e === void 0 ? void 0 : _e.callAssociatedDetails) === null || _f === void 0 ? void 0 : _f.virtualTeamName) || 'No Team Name')),\n                react_1.default.createElement(react_collaboration_1.Text, { className: \"phone-number\", type: \"body-secondary\", tagName: 'small' },\n                    react_1.default.createElement(\"strong\", null, \"Phone number:\"),\n                    ' ',\n                    react_1.default.createElement(\"span\", null, ((_j = (_h = (_g = currentTask === null || currentTask === void 0 ? void 0 : currentTask.data) === null || _g === void 0 ? void 0 : _g.interaction) === null || _h === void 0 ? void 0 : _h.callAssociatedDetails) === null || _j === void 0 ? void 0 : _j.ani) || 'No Phone Number')),\n                react_1.default.createElement(react_collaboration_1.Text, { className: \"rona\", type: \"body-secondary\", tagName: 'small' },\n                    react_1.default.createElement(\"strong\", null, \"RONA:\"),\n                    ' ',\n                    react_1.default.createElement(\"span\", null, ((_m = (_l = (_k = currentTask === null || currentTask === void 0 ? void 0 : currentTask.data) === null || _k === void 0 ? void 0 : _k.interaction) === null || _l === void 0 ? void 0 : _l.callAssociatedDetails) === null || _m === void 0 ? void 0 : _m.ronaTimeout) || 'No RONA')))),\n        (consultAccepted || consultInitiated) && !controlVisibility.wrapup && (react_1.default.createElement(\"div\", { className: `call-control-consult-container ${callControlConsultClassName || ''}` },\n            react_1.default.createElement(call_control_consult_1.default, { agentName: consultAgentName, startTimeStamp: consultStartTimeStamp, endConsultCall: endConsultCall, onTransfer: () => consultTransfer(consultAgentId || currentTask.data.destAgentId, lastTargetType), consultCompleted: consultCompleted, isAgentBeingConsulted: !consultAccepted, isEndConsultEnabled: isEndConsultEnabled })))));\n};\nexports[\"default\"] = CallControlCADComponent;\n\n\n//# sourceURL=webpack://@webex/cc-components/./src/components/task/CallControlCAD/call-control-cad.tsx?");
+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 call_control_1 = __importDefault(__webpack_require__(/*! ../CallControl/call-control */ \"./src/components/task/CallControl/call-control.tsx\"));\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\");\n__webpack_require__(/*! ./call-control-cad.styles.scss */ \"./src/components/task/CallControlCAD/call-control-cad.styles.scss\");\nconst index_1 = __importDefault(__webpack_require__(/*! ../TaskTimer/index */ \"./src/components/task/TaskTimer/index.tsx\"));\nconst call_control_consult_1 = __importDefault(__webpack_require__(/*! ../CallControl/CallControlCustom/call-control-consult */ \"./src/components/task/CallControl/CallControlCustom/call-control-consult.tsx\"));\nconst utils_1 = __webpack_require__(/*! ../../../utils */ \"./src/utils/index.ts\");\nconst CallControlCADComponent = (props) => {\n    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;\n    const { currentTask, isHeld, isRecording, holdTime, consultAccepted, consultInitiated, consultAgentName, consultStartTimeStamp, endConsultCall, consultAgentId, consultCompleted, consultTransfer, callControlClassName, callControlConsultClassName, startTimestamp, isEndConsultEnabled, lastTargetType, controlVisibility, } = props;\n    // Use the Web Worker-based hold timer\n    const formatTime = (time) => {\n        const minutes = Math.floor((time % 3600) / 60);\n        const seconds = time % 60;\n        return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;\n    };\n    const currentMediaType = (0, utils_1.getMediaTypeInfo)(currentTask.data.interaction.mediaType, currentTask.data.interaction.mediaChannel);\n    if (!currentTask)\n        return null;\n    return (react_1.default.createElement(react_1.default.Fragment, null,\n        react_1.default.createElement(\"div\", { className: `call-control-container ${callControlClassName || ''}` },\n            react_1.default.createElement(\"div\", { className: \"caller-info\" },\n                react_1.default.createElement(\"div\", { className: \"call-icon-background\" }, currentMediaType.isBrandVisual ? (react_1.default.createElement(react_2.Brandvisual, { name: currentMediaType.iconName, className: `media-icon ${currentMediaType.className}` })) : (react_1.default.createElement(react_2.Icon, { name: currentMediaType.iconName, size: 1, className: `media-icon ${currentMediaType.className}` }))),\n                react_1.default.createElement(\"div\", { className: \"customer-info\" },\n                    react_1.default.createElement(react_collaboration_1.Text, { className: \"customer-id\", type: \"body-large-bold\", tagName: 'small' }, ((_c = (_b = (_a = currentTask === null || currentTask === void 0 ? void 0 : currentTask.data) === null || _a === void 0 ? void 0 : _a.interaction) === null || _b === void 0 ? void 0 : _b.callAssociatedDetails) === null || _c === void 0 ? void 0 : _c.ani) || 'No Caller ID'),\n                    react_1.default.createElement(\"div\", { className: \"call-details\" },\n                        react_1.default.createElement(react_collaboration_1.Text, { className: \"call-timer\", type: \"body-secondary\", tagName: 'small' },\n                            currentMediaType.labelName,\n                            \" - \",\n                            react_1.default.createElement(index_1.default, { startTimeStamp: startTimestamp })),\n                        react_1.default.createElement(\"div\", { className: \"call-status\" }, !controlVisibility.wrapup && isHeld && (react_1.default.createElement(react_1.default.Fragment, null,\n                            react_1.default.createElement(\"span\", { className: \"dot\" }, \"\\u2022\"),\n                            react_1.default.createElement(\"div\", { className: \"on-hold\" },\n                                react_1.default.createElement(react_2.Icon, { name: \"call-hold-filled\", size: 1, className: \"call-hold-filled-icon\" }),\n                                react_1.default.createElement(\"span\", { className: \"on-hold-chip-text\" },\n                                    \"On hold - \",\n                                    formatTime(holdTime))))))))),\n            !controlVisibility.wrapup && controlVisibility.recordingIndicator && (react_1.default.createElement(\"div\", { className: \"recording-indicator\" },\n                react_1.default.createElement(react_2.Icon, { name: isRecording ? 'record-active-badge-filled' : 'record-paused-badge-filled', size: 1.3 }))),\n            react_1.default.createElement(call_control_1.default, Object.assign({}, props)),\n            react_1.default.createElement(\"div\", { className: \"cad-variables\" },\n                react_1.default.createElement(react_collaboration_1.Text, { className: \"queue\", type: \"body-secondary\", tagName: 'small' },\n                    react_1.default.createElement(\"strong\", null, \"Queue:\"),\n                    ' ',\n                    react_1.default.createElement(\"span\", null, ((_f = (_e = (_d = currentTask === null || currentTask === void 0 ? void 0 : currentTask.data) === null || _d === void 0 ? void 0 : _d.interaction) === null || _e === void 0 ? void 0 : _e.callAssociatedDetails) === null || _f === void 0 ? void 0 : _f.virtualTeamName) || 'No Team Name')),\n                react_1.default.createElement(react_collaboration_1.Text, { className: \"phone-number\", type: \"body-secondary\", tagName: 'small' },\n                    react_1.default.createElement(\"strong\", null, \"Phone number:\"),\n                    ' ',\n                    react_1.default.createElement(\"span\", null, ((_j = (_h = (_g = currentTask === null || currentTask === void 0 ? void 0 : currentTask.data) === null || _g === void 0 ? void 0 : _g.interaction) === null || _h === void 0 ? void 0 : _h.callAssociatedDetails) === null || _j === void 0 ? void 0 : _j.ani) || 'No Phone Number')),\n                react_1.default.createElement(react_collaboration_1.Text, { className: \"rona\", type: \"body-secondary\", tagName: 'small' },\n                    react_1.default.createElement(\"strong\", null, \"RONA:\"),\n                    ' ',\n                    react_1.default.createElement(\"span\", null, ((_m = (_l = (_k = currentTask === null || currentTask === void 0 ? void 0 : currentTask.data) === null || _k === void 0 ? void 0 : _k.interaction) === null || _l === void 0 ? void 0 : _l.callAssociatedDetails) === null || _m === void 0 ? void 0 : _m.ronaTimeout) || 'No RONA')))),\n        (consultAccepted || consultInitiated) && !controlVisibility.wrapup && (react_1.default.createElement(\"div\", { className: `call-control-consult-container ${callControlConsultClassName || ''}` },\n            react_1.default.createElement(call_control_consult_1.default, { agentName: consultAgentName, startTimeStamp: consultStartTimeStamp, endConsultCall: endConsultCall, onTransfer: () => consultTransfer(consultAgentId || currentTask.data.destAgentId, lastTargetType), consultCompleted: consultCompleted, isAgentBeingConsulted: !consultAccepted, isEndConsultEnabled: isEndConsultEnabled })))));\n};\nexports[\"default\"] = CallControlCADComponent;\n\n\n//# sourceURL=webpack://@webex/cc-components/./src/components/task/CallControlCAD/call-control-cad.tsx?");
 
 /***/ }),
 
@@ -3230,7 +3230,7 @@ eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-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 Task_1 = __importDefault(__webpack_require__(/*! ../Task */ \"./src/components/task/Task/index.tsx\"));\nconst IncomingTaskComponent = (props) => {\n    var _a, _b, _c, _d;\n    const { incomingTask, isBrowser, accept, reject } = props;\n    if (!incomingTask) {\n        return react_1.default.createElement(react_1.default.Fragment, null); // hidden component\n    }\n    const callAssociationDetails = (_b = (_a = incomingTask === null || incomingTask === void 0 ? void 0 : incomingTask.data) === null || _a === void 0 ? void 0 : _a.interaction) === null || _b === void 0 ? void 0 : _b.callAssociatedDetails;\n    const ani = callAssociationDetails === null || callAssociationDetails === void 0 ? void 0 : callAssociationDetails.ani;\n    const virtualTeamName = callAssociationDetails === null || callAssociationDetails === void 0 ? void 0 : callAssociationDetails.virtualTeamName;\n    const ronaTimeout = (callAssociationDetails === null || callAssociationDetails === void 0 ? void 0 : callAssociationDetails.ronaTimeout) ? Number(callAssociationDetails === null || callAssociationDetails === void 0 ? void 0 : callAssociationDetails.ronaTimeout) : null;\n    const startTimeStamp = (_d = (_c = incomingTask === null || incomingTask === void 0 ? void 0 : incomingTask.data) === null || _c === void 0 ? void 0 : _c.interaction) === null || _d === void 0 ? void 0 : _d.createdTimestamp;\n    const isTelephony = incomingTask.data.interaction.mediaType === 'telephony';\n    const acceptText = !incomingTask.data.wrapUpRequired ? (isTelephony && !isBrowser ? 'Ringing' : 'Accept') : undefined;\n    const declineText = !incomingTask.data.wrapUpRequired && isTelephony && isBrowser ? 'Decline' : undefined;\n    return (react_1.default.createElement(Task_1.default, { interactionId: incomingTask.data.interactionId, title: ani, state: \"\", startTimeStamp: startTimeStamp, isIncomingTask: true, queue: virtualTeamName, acceptTask: () => accept(incomingTask), declineTask: () => reject(incomingTask), ronaTimeout: ronaTimeout, acceptText: acceptText, disableAccept: isTelephony && !isBrowser, declineText: declineText, styles: \"task-list-hover\" }));\n};\nexports[\"default\"] = IncomingTaskComponent;\n\n\n//# sourceURL=webpack://@webex/cc-components/./src/components/task/IncomingTask/incoming-task.tsx?");
+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 task_types_1 = __webpack_require__(/*! ../task.types */ \"./src/components/task/task.types.ts\");\nconst Task_1 = __importDefault(__webpack_require__(/*! ../Task */ \"./src/components/task/Task/index.tsx\"));\nconst IncomingTaskComponent = (props) => {\n    var _a, _b, _c, _d;\n    const { incomingTask, isBrowser, accept, reject } = props;\n    if (!incomingTask) {\n        return react_1.default.createElement(react_1.default.Fragment, null); // hidden component\n    }\n    const callAssociationDetails = (_b = (_a = incomingTask === null || incomingTask === void 0 ? void 0 : incomingTask.data) === null || _a === void 0 ? void 0 : _a.interaction) === null || _b === void 0 ? void 0 : _b.callAssociatedDetails;\n    const ani = callAssociationDetails === null || callAssociationDetails === void 0 ? void 0 : callAssociationDetails.ani;\n    const virtualTeamName = callAssociationDetails === null || callAssociationDetails === void 0 ? void 0 : callAssociationDetails.virtualTeamName;\n    const ronaTimeout = (callAssociationDetails === null || callAssociationDetails === void 0 ? void 0 : callAssociationDetails.ronaTimeout) ? Number(callAssociationDetails === null || callAssociationDetails === void 0 ? void 0 : callAssociationDetails.ronaTimeout) : null;\n    const startTimeStamp = (_d = (_c = incomingTask === null || incomingTask === void 0 ? void 0 : incomingTask.data) === null || _c === void 0 ? void 0 : _c.interaction) === null || _d === void 0 ? void 0 : _d.createdTimestamp;\n    const mediaType = incomingTask.data.interaction.mediaType;\n    const mediaChannel = incomingTask.data.interaction.mediaChannel;\n    const isTelephony = mediaType === task_types_1.MEDIA_CHANNEL.TELEPHONY;\n    const acceptText = !incomingTask.data.wrapUpRequired\n        ? isTelephony && !isBrowser\n            ? 'Ringing...'\n            : 'Accept'\n        : undefined;\n    const declineText = !incomingTask.data.wrapUpRequired && isTelephony && isBrowser ? 'Decline' : undefined;\n    return (react_1.default.createElement(Task_1.default, { interactionId: incomingTask.data.interactionId, title: ani, state: \"\", startTimeStamp: startTimeStamp, isIncomingTask: true, queue: virtualTeamName, acceptTask: () => accept(incomingTask), declineTask: () => reject(incomingTask), ronaTimeout: ronaTimeout, acceptText: acceptText, disableAccept: isTelephony && !isBrowser, declineText: declineText, styles: \"task-list-hover\", mediaType: mediaType, mediaChannel: mediaChannel }));\n};\nexports[\"default\"] = IncomingTaskComponent;\n\n\n//# sourceURL=webpack://@webex/cc-components/./src/components/task/IncomingTask/incoming-task.tsx?");
 
 /***/ }),
 
@@ -3252,7 +3252,7 @@ eval("\nvar __createBinding = (this && this.__createBinding) || (Object.create ?
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-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 TaskTimer_1 = __importDefault(__webpack_require__(/*! ../TaskTimer */ \"./src/components/task/TaskTimer/index.tsx\"));\n__webpack_require__(/*! ./styles.scss */ \"./src/components/task/Task/styles.scss\");\nconst Task = ({ title, state, startTimeStamp, ronaTimeout, selected = false, styles, isIncomingTask = false, queue, acceptTask, declineTask, interactionId, onTaskSelect, acceptText, disableAccept = false, declineText, }) => {\n    const capitalizeFirstWord = (str) => {\n        return str.replace(/^\\s*(\\w)/, (match, firstLetter) => firstLetter.toUpperCase());\n    };\n    return (react_1.default.createElement(react_collaboration_1.ListItemBase, { className: `task-list-item ${selected ? 'task-list-item--selected' : ''} ${styles}`, onPress: onTaskSelect ? onTaskSelect : undefined, id: interactionId },\n        react_1.default.createElement(react_collaboration_1.ListItemBaseSection, { position: \"start\" },\n            react_1.default.createElement(react_2.Avatar, { \"icon-name\": \"handset-filled\" })),\n        react_1.default.createElement(react_collaboration_1.ListItemBaseSection, { position: \"fill\" },\n            react_1.default.createElement(\"section\", { className: \"task-details\" },\n                title && (react_1.default.createElement(react_collaboration_1.Text, { tagName: \"span\", type: selected ? 'body-large-bold' : 'body-large-medium' }, title)),\n                state && !isIncomingTask && (react_1.default.createElement(react_collaboration_1.Text, { tagName: \"span\", type: \"body-midsize-regular\", className: \"task-text\" }, capitalizeFirstWord(state))),\n                queue && isIncomingTask && (react_1.default.createElement(react_collaboration_1.Text, { tagName: \"span\", type: \"body-midsize-regular\", className: \"task-text\" }, capitalizeFirstWord(queue))),\n                (isIncomingTask && !ronaTimeout) || !isIncomingTask\n                    ? startTimeStamp && (react_1.default.createElement(react_collaboration_1.Text, { tagName: \"span\", type: \"body-midsize-regular\", className: \"task-text\" },\n                        \"Handle Time: \",\n                        '  ',\n                        react_1.default.createElement(TaskTimer_1.default, { startTimeStamp: startTimeStamp })))\n                    : null,\n                isIncomingTask && ronaTimeout && (react_1.default.createElement(react_collaboration_1.Text, { tagName: \"span\", type: \"body-midsize-regular\", className: \"task-text\" },\n                    \"Time Left: \",\n                    '  ',\n                    react_1.default.createElement(TaskTimer_1.default, { countdown: true, ronaTimeout: ronaTimeout }))))),\n        react_1.default.createElement(react_collaboration_1.ListItemBaseSection, { position: \"end\" },\n            react_1.default.createElement(\"div\", { className: \"task-button-container\" },\n                acceptText ? (react_1.default.createElement(react_collaboration_1.ButtonPill, { onPress: acceptTask, color: \"join\", disabled: disableAccept }, acceptText)) : null,\n                declineText ? (react_1.default.createElement(react_collaboration_1.ButtonPill, { onPress: declineTask, color: \"cancel\" }, declineText)) : null))));\n};\nexports[\"default\"] = Task;\n\n\n//# sourceURL=webpack://@webex/cc-components/./src/components/task/Task/index.tsx?");
+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 TaskTimer_1 = __importDefault(__webpack_require__(/*! ../TaskTimer */ \"./src/components/task/TaskTimer/index.tsx\"));\nconst utils_1 = __webpack_require__(/*! ../../../utils */ \"./src/utils/index.ts\");\n__webpack_require__(/*! ./styles.scss */ \"./src/components/task/Task/styles.scss\");\nconst Task = ({ title, state, startTimeStamp, ronaTimeout, selected = false, styles, isIncomingTask = false, queue, acceptTask, declineTask, interactionId, onTaskSelect, acceptText, disableAccept = false, declineText, mediaType, mediaChannel, }) => {\n    const capitalizeFirstWord = (str) => {\n        return str.replace(/^\\s*(\\w)/, (match, firstLetter) => firstLetter.toUpperCase());\n    };\n    const currentMediaType = (0, utils_1.getMediaTypeInfo)(mediaType, mediaChannel);\n    return (react_1.default.createElement(react_collaboration_1.ListItemBase, { className: `task-list-item ${selected ? 'task-list-item--selected' : ''} ${styles}`, onPress: onTaskSelect ? onTaskSelect : undefined, id: interactionId },\n        react_1.default.createElement(react_collaboration_1.ListItemBaseSection, { position: \"start\" }, currentMediaType.isBrandVisual ? (react_1.default.createElement(\"div\", { className: \"brand-visual-background\" },\n            react_1.default.createElement(react_2.Brandvisual, { name: currentMediaType.iconName, className: currentMediaType.className }))) : (react_1.default.createElement(react_2.Avatar, { \"icon-name\": currentMediaType.iconName, className: currentMediaType.className }))),\n        react_1.default.createElement(react_collaboration_1.ListItemBaseSection, { position: \"fill\" },\n            react_1.default.createElement(\"section\", { className: \"task-details\" },\n                title && (react_1.default.createElement(react_collaboration_1.Text, { tagName: \"span\", type: selected ? 'body-large-bold' : 'body-large-medium' }, title)),\n                state && !isIncomingTask && (react_1.default.createElement(react_collaboration_1.Text, { tagName: \"span\", type: \"body-midsize-regular\", className: \"task-text\" }, capitalizeFirstWord(state))),\n                queue && isIncomingTask && (react_1.default.createElement(react_collaboration_1.Text, { tagName: \"span\", type: \"body-midsize-regular\", className: \"task-text\" }, capitalizeFirstWord(queue))),\n                (isIncomingTask && !ronaTimeout) || !isIncomingTask\n                    ? startTimeStamp && (react_1.default.createElement(react_collaboration_1.Text, { tagName: \"span\", type: \"body-midsize-regular\", className: \"task-text\" },\n                        \"Handle Time: \",\n                        '  ',\n                        react_1.default.createElement(TaskTimer_1.default, { startTimeStamp: startTimeStamp })))\n                    : null,\n                isIncomingTask && ronaTimeout && (react_1.default.createElement(react_collaboration_1.Text, { tagName: \"span\", type: \"body-midsize-regular\", className: \"task-text\" },\n                    \"Time Left: \",\n                    '  ',\n                    react_1.default.createElement(TaskTimer_1.default, { countdown: true, ronaTimeout: ronaTimeout }))))),\n        react_1.default.createElement(react_collaboration_1.ListItemBaseSection, { position: \"end\" },\n            react_1.default.createElement(\"div\", { className: \"task-button-container\" },\n                acceptText ? (react_1.default.createElement(react_collaboration_1.ButtonPill, { onPress: acceptTask, color: \"join\", disabled: disableAccept }, acceptText)) : null,\n                declineText ? (react_1.default.createElement(react_collaboration_1.ButtonPill, { onPress: declineTask, color: \"cancel\" }, declineText)) : null))));\n};\nexports[\"default\"] = Task;\n\n\n//# sourceURL=webpack://@webex/cc-components/./src/components/task/Task/index.tsx?");
 
 /***/ }),
 
@@ -3263,7 +3263,7 @@ eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-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 Task_1 = __importDefault(__webpack_require__(/*! ../Task */ \"./src/components/task/Task/index.tsx\"));\n__webpack_require__(/*! ./styles.scss */ \"./src/components/task/TaskList/styles.scss\");\nconst TaskListComponent = (props) => {\n    var _a;\n    const { currentTask, taskList, acceptTask, declineTask, isBrowser, onTaskSelect } = props;\n    if (!taskList || Object.keys(taskList).length === 0) {\n        return react_1.default.createElement(react_1.default.Fragment, null); // hidden component\n    }\n    return (react_1.default.createElement(\"ul\", { className: \"task-list\" }, (_a = Object.values(taskList)) === null || _a === void 0 ? void 0 : _a.map((task, index) => {\n        var _a, _b;\n        const callAssociationDetails = (_b = (_a = task === null || task === void 0 ? void 0 : task.data) === null || _a === void 0 ? void 0 : _a.interaction) === null || _b === void 0 ? void 0 : _b.callAssociatedDetails;\n        const ani = callAssociationDetails === null || callAssociationDetails === void 0 ? void 0 : callAssociationDetails.ani;\n        const virtualTeamName = callAssociationDetails === null || callAssociationDetails === void 0 ? void 0 : callAssociationDetails.virtualTeamName;\n        // rona timeout is not always available in the callAssociatedDetails object\n        const ronaTimeout = (callAssociationDetails === null || callAssociationDetails === void 0 ? void 0 : callAssociationDetails.ronaTimeout) ? Number(callAssociationDetails === null || callAssociationDetails === void 0 ? void 0 : callAssociationDetails.ronaTimeout) : null;\n        const taskState = task.data.interaction.state;\n        const startTimeStamp = task.data.interaction.createdTimestamp;\n        const isIncomingTask = taskState === 'new' || taskState === 'consult';\n        const isTelephony = task.data.interaction.mediaType === 'telephony';\n        const acceptText = isIncomingTask && !task.data.wrapUpRequired ? (isTelephony && !isBrowser ? 'Ringing' : 'Accept') : undefined;\n        const declineText = isIncomingTask && !task.data.wrapUpRequired && isTelephony && isBrowser ? 'Decline' : undefined;\n        return (react_1.default.createElement(Task_1.default, { interactionId: task.data.interactionId, title: ani, state: !isIncomingTask ? taskState : '', startTimeStamp: startTimeStamp, selected: (currentTask === null || currentTask === void 0 ? void 0 : currentTask.data.interactionId) === task.data.interactionId, key: index, isIncomingTask: isIncomingTask, queue: virtualTeamName, acceptTask: () => acceptTask(task), declineTask: () => declineTask(task), ronaTimeout: isIncomingTask ? ronaTimeout : null, onTaskSelect: () => {\n                if ((currentTask === null || currentTask === void 0 ? void 0 : currentTask.data.interactionId) !== task.data.interactionId &&\n                    !(isIncomingTask && !task.data.wrapUpRequired)) {\n                    onTaskSelect(task);\n                }\n            }, acceptText: acceptText, disableAccept: isIncomingTask && isTelephony && !isBrowser, declineText: declineText }));\n    })));\n};\nexports[\"default\"] = TaskListComponent;\n\n\n//# sourceURL=webpack://@webex/cc-components/./src/components/task/TaskList/task-list.tsx?");
+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 task_types_1 = __webpack_require__(/*! ../task.types */ \"./src/components/task/task.types.ts\");\nconst Task_1 = __importDefault(__webpack_require__(/*! ../Task */ \"./src/components/task/Task/index.tsx\"));\n__webpack_require__(/*! ./styles.scss */ \"./src/components/task/TaskList/styles.scss\");\nconst TaskListComponent = (props) => {\n    var _a;\n    const { currentTask, taskList, acceptTask, declineTask, isBrowser, onTaskSelect } = props;\n    if (!taskList || Object.keys(taskList).length === 0) {\n        return react_1.default.createElement(react_1.default.Fragment, null); // hidden component\n    }\n    return (react_1.default.createElement(\"ul\", { className: \"task-list\" }, (_a = Object.values(taskList)) === null || _a === void 0 ? void 0 : _a.map((task, index) => {\n        var _a, _b;\n        const callAssociationDetails = (_b = (_a = task === null || task === void 0 ? void 0 : task.data) === null || _a === void 0 ? void 0 : _a.interaction) === null || _b === void 0 ? void 0 : _b.callAssociatedDetails;\n        const ani = callAssociationDetails === null || callAssociationDetails === void 0 ? void 0 : callAssociationDetails.ani;\n        const virtualTeamName = callAssociationDetails === null || callAssociationDetails === void 0 ? void 0 : callAssociationDetails.virtualTeamName;\n        // rona timeout is not always available in the callAssociatedDetails object\n        const ronaTimeout = (callAssociationDetails === null || callAssociationDetails === void 0 ? void 0 : callAssociationDetails.ronaTimeout) ? Number(callAssociationDetails === null || callAssociationDetails === void 0 ? void 0 : callAssociationDetails.ronaTimeout) : null;\n        const taskState = task.data.interaction.state;\n        const startTimeStamp = task.data.interaction.createdTimestamp;\n        const isIncomingTask = taskState === 'new' || taskState === 'consult';\n        const mediaType = task.data.interaction.mediaType;\n        const mediaChannel = task.data.interaction.mediaChannel;\n        const isTelephony = mediaType === task_types_1.MEDIA_CHANNEL.TELEPHONY;\n        const acceptText = isIncomingTask && !task.data.wrapUpRequired\n            ? isTelephony && !isBrowser\n                ? 'Ringing...'\n                : 'Accept'\n            : undefined;\n        const declineText = isIncomingTask && !task.data.wrapUpRequired && isTelephony && isBrowser ? 'Decline' : undefined;\n        return (react_1.default.createElement(Task_1.default, { interactionId: task.data.interactionId, title: ani, state: !isIncomingTask ? taskState : '', startTimeStamp: startTimeStamp, selected: (currentTask === null || currentTask === void 0 ? void 0 : currentTask.data.interactionId) === task.data.interactionId, key: index, isIncomingTask: isIncomingTask, queue: virtualTeamName, acceptTask: () => acceptTask(task), declineTask: () => declineTask(task), ronaTimeout: isIncomingTask ? ronaTimeout : null, onTaskSelect: () => {\n                if ((currentTask === null || currentTask === void 0 ? void 0 : currentTask.data.interactionId) !== task.data.interactionId &&\n                    !(isIncomingTask && !task.data.wrapUpRequired)) {\n                    onTaskSelect(task);\n                }\n            }, acceptText: acceptText, disableAccept: isIncomingTask && isTelephony && !isBrowser, declineText: declineText, mediaType: mediaType, mediaChannel: mediaChannel }));\n    })));\n};\nexports[\"default\"] = TaskListComponent;\n\n\n//# sourceURL=webpack://@webex/cc-components/./src/components/task/TaskList/task-list.tsx?");
 
 /***/ }),
 
@@ -3285,7 +3285,7 @@ eval("\nvar __createBinding = (this && this.__createBinding) || (Object.create ?
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
 "use strict";
-eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.DestinationType = void 0;\nconst cc_store_1 = __webpack_require__(/*! @webex/cc-store */ \"@webex/cc-store\");\nObject.defineProperty(exports, \"DestinationType\", ({ enumerable: true, get: function () { return cc_store_1.DestinationType; } }));\n\n\n//# sourceURL=webpack://@webex/cc-components/./src/components/task/task.types.ts?");
+eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.MEDIA_CHANNEL = exports.DestinationType = void 0;\nconst cc_store_1 = __webpack_require__(/*! @webex/cc-store */ \"@webex/cc-store\");\nObject.defineProperty(exports, \"DestinationType\", ({ enumerable: true, get: function () { return cc_store_1.DestinationType; } }));\nexports.MEDIA_CHANNEL = {\n    EMAIL: 'email',\n    CHAT: 'chat',\n    TELEPHONY: 'telephony',\n    SOCIAL: 'social',\n    SMS: 'sms',\n    FACEBOOK: 'facebook',\n    WHATSAPP: 'whatsapp',\n    APPLE: 'applemessages',\n};\n\n\n//# sourceURL=webpack://@webex/cc-components/./src/components/task/task.types.ts?");
 
 /***/ }),
 
@@ -3304,10 +3304,10 @@ eval("\nvar __createBinding = (this && this.__createBinding) || (Object.create ?
 /*!****************************!*\
   !*** ./src/utils/index.ts ***!
   \****************************/
-/***/ ((__unused_webpack_module, exports) => {
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
 "use strict";
-eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.formatTime = void 0;\nconst formatTime = (time) => {\n    const hours = Math.floor(time / 3600);\n    const minutes = Math.floor((time % 3600) / 60);\n    const seconds = time % 60;\n    // Display full format with hours if time is 1 hour or more\n    if (hours > 0) {\n        return `${hours.toString().padStart(2, '0')}:${minutes\n            .toString()\n            .padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;\n    }\n    // Less than 1 hour: display mm:ss with two-digit padding for minutes\n    return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;\n};\nexports.formatTime = formatTime;\n\n\n//# sourceURL=webpack://@webex/cc-components/./src/utils/index.ts?");
+eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.getMediaTypeInfo = exports.formatTime = void 0;\nconst task_types_1 = __webpack_require__(/*! ../components/task/task.types */ \"./src/components/task/task.types.ts\");\nconst formatTime = (time) => {\n    const hours = Math.floor(time / 3600);\n    const minutes = Math.floor((time % 3600) / 60);\n    const seconds = time % 60;\n    // Display full format with hours if time is 1 hour or more\n    if (hours > 0) {\n        return `${hours.toString().padStart(2, '0')}:${minutes\n            .toString()\n            .padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;\n    }\n    // Less than 1 hour: display mm:ss with two-digit padding for minutes\n    return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;\n};\nexports.formatTime = formatTime;\n/**\n * Returns media information (icon, class, label, and brand visual flag)\n * based on the provided mediaType and mediaChannel.\n *\n * - If the mediaType is SOCIAL, it checks mediaChannel-specific mappings\n *   like Facebook, WhatsApp, and Apple Chat.\n * - For other mediaTypes (e.g., TELEPHONY, EMAIL, CHAT), it uses a direct map.\n * - If no match is found, a default media info is returned for TELEPHONY or SOCIAL.\n *\n * This utility consolidates icon metadata and display label logic for consistent rendering.\n *\n * @param mediaType - The primary media type (e.g., TELEPHONY, EMAIL, SOCIAL)\n * @param mediaChannel - The secondary channel for SOCIAL types (e.g., FACEBOOK, WHATSAPP)\n * @returns MediaInfo object with iconName, className, labelName, and isBrandVisual flag\n */\nconst getMediaTypeInfo = (mediaType, mediaChannel) => {\n    var _a, _b;\n    const socialMap = {\n        [task_types_1.MEDIA_CHANNEL.FACEBOOK]: {\n            iconName: 'social-facebook-color',\n            className: task_types_1.MEDIA_CHANNEL.FACEBOOK,\n            labelName: 'FB messenger',\n            isBrandVisual: true,\n        },\n        [task_types_1.MEDIA_CHANNEL.WHATSAPP]: {\n            iconName: 'social-whatsapp-color',\n            className: task_types_1.MEDIA_CHANNEL.WHATSAPP,\n            labelName: 'Whatsapp',\n            isBrandVisual: true,\n        },\n        [task_types_1.MEDIA_CHANNEL.APPLE]: {\n            iconName: 'apple-business-chat-color',\n            className: task_types_1.MEDIA_CHANNEL.APPLE,\n            labelName: 'Apple Chat',\n            isBrandVisual: true,\n        },\n    };\n    const typeMap = {\n        [task_types_1.MEDIA_CHANNEL.TELEPHONY]: {\n            iconName: 'handset-filled',\n            className: task_types_1.MEDIA_CHANNEL.TELEPHONY,\n            labelName: 'Call',\n            isBrandVisual: false,\n        },\n        [task_types_1.MEDIA_CHANNEL.EMAIL]: {\n            iconName: 'email-filled',\n            className: task_types_1.MEDIA_CHANNEL.EMAIL,\n            labelName: 'Email',\n            isBrandVisual: false,\n        },\n        [task_types_1.MEDIA_CHANNEL.CHAT]: {\n            iconName: 'chat-filled',\n            className: task_types_1.MEDIA_CHANNEL.CHAT,\n            labelName: 'Chat',\n            isBrandVisual: false,\n        },\n    };\n    if (mediaType === task_types_1.MEDIA_CHANNEL.SOCIAL) {\n        return ((_a = socialMap[mediaChannel]) !== null && _a !== void 0 ? _a : {\n            iconName: 'chat-filled',\n            className: task_types_1.MEDIA_CHANNEL.SOCIAL,\n            labelName: 'Chat',\n            isBrandVisual: false,\n        });\n    }\n    return ((_b = typeMap[mediaType]) !== null && _b !== void 0 ? _b : {\n        iconName: 'handset-filled',\n        className: task_types_1.MEDIA_CHANNEL.TELEPHONY,\n        labelName: 'Call',\n        isBrandVisual: false,\n    });\n};\nexports.getMediaTypeInfo = getMediaTypeInfo;\n\n\n//# sourceURL=webpack://@webex/cc-components/./src/utils/index.ts?");
 
 /***/ }),
 

package/dist/types/components/task/Task/index.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { PressEvent } from '@react-types/shared';
+import type { MEDIA_CHANNEL as MediaChannelType } from '../task.types';
 import './styles.scss';
 interface TaskProps {
     interactionId?: string;
@@ -17,6 +18,8 @@ interface TaskProps {
     declineText?: string;
     disableAccept?: boolean;
     styles?: string;
+    mediaType?: MediaChannelType;
+    mediaChannel?: MediaChannelType;
 }
 declare const Task: React.FC<TaskProps>;
 export default Task;

package/dist/types/components/task/task.types.d.ts

@@ -1,4 +1,5 @@
 import { ILogger, ITask, IContactCenter, WrapupCodes, BuddyDetails, DestinationType, ContactServiceQueue } from '@webex/cc-store';
+type Enum<T extends Record<string, unknown>> = T[keyof T];
 /**
  * Interface representing the TaskProps of a user.
  */
@@ -348,3 +349,20 @@ export interface CallControlConsultComponentsProps {
  */
 export type CallControlMenuType = 'Consult' | 'Transfer';
 export { DestinationType };
+export declare const MEDIA_CHANNEL: {
+    readonly EMAIL: "email";
+    readonly CHAT: "chat";
+    readonly TELEPHONY: "telephony";
+    readonly SOCIAL: "social";
+    readonly SMS: "sms";
+    readonly FACEBOOK: "facebook";
+    readonly WHATSAPP: "whatsapp";
+    readonly APPLE: "applemessages";
+};
+export type MEDIA_CHANNEL = Enum<typeof MEDIA_CHANNEL>;
+export type MediaInfo = {
+    iconName: string;
+    className: string;
+    labelName: string;
+    isBrandVisual: boolean;
+};

package/dist/types/utils/index.d.ts

@@ -1 +1,19 @@
+import { MediaInfo } from '../components/task/task.types';
+import type { MEDIA_CHANNEL as MediaChannelType } from '../components/task/task.types';
 export declare const formatTime: (time: number) => string;
+/**
+ * Returns media information (icon, class, label, and brand visual flag)
+ * based on the provided mediaType and mediaChannel.
+ *
+ * - If the mediaType is SOCIAL, it checks mediaChannel-specific mappings
+ *   like Facebook, WhatsApp, and Apple Chat.
+ * - For other mediaTypes (e.g., TELEPHONY, EMAIL, CHAT), it uses a direct map.
+ * - If no match is found, a default media info is returned for TELEPHONY or SOCIAL.
+ *
+ * This utility consolidates icon metadata and display label logic for consistent rendering.
+ *
+ * @param mediaType - The primary media type (e.g., TELEPHONY, EMAIL, SOCIAL)
+ * @param mediaChannel - The secondary channel for SOCIAL types (e.g., FACEBOOK, WHATSAPP)
+ * @returns MediaInfo object with iconName, className, labelName, and isBrandVisual flag
+ */
+export declare const getMediaTypeInfo: (mediaType: MediaChannelType, mediaChannel: MediaChannelType) => MediaInfo;

package/dist/wc.js

@@ -2922,7 +2922,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-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, `:root {\n  --mds-color-theme-avatar-glass-normal: rgba(0, 0, 0, 0.07);\n}\n\n@media (prefers-color-scheme: dark) {\n  :root {\n    --mds-color-theme-avatar-glass-normal: rgba(255, 255, 255, 0.07);\n  }\n}\n.task-list-item {\n  display: flex;\n  padding: 0.5rem 0.75rem;\n  align-items: center;\n  align-self: stretch;\n  height: 5rem !important;\n}\n.task-list-item mdc-avatar {\n  --mdc-avatar-default-background-color: var(--mds-color-theme-avatar-glass-normal);\n  --mdc-avatar-default-foreground-color: var(--mds-color-theme-indicator-stable);\n}\n\n.task-text {\n  color: var(--mds-color-theme-text-secondary-normal);\n}\n\n.task-list-item--selected {\n  background: var(--mds-color-theme-background-primary-active);\n}\n.task-list-item--selected mdc-avatar {\n  --mdc-avatar-default-background-color: var(--mds-color-theme-avatar-glass-active, rgba(255, 255, 255, 0.8));\n}\n\n.task-button-container {\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n}\n\n.task-list-hover:hover {\n  background: none !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/Task/styles.scss?../../../node_modules/css-loader/dist/cjs.js!../../../node_modules/sass-loader/dist/cjs.js");
+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, `:root {\n  --mds-color-theme-avatar-glass-normal: rgba(0, 0, 0, 0.07);\n}\n\n@media (prefers-color-scheme: dark) {\n  :root {\n    --mds-color-theme-avatar-glass-normal: rgba(255, 255, 255, 0.07);\n  }\n}\n.task-list-item {\n  display: flex;\n  padding: 0.5rem 0.75rem;\n  align-items: center;\n  align-self: stretch;\n  height: 5rem !important;\n}\n.task-list-item mdc-avatar {\n  --mdc-avatar-default-background-color: var(--mds-color-theme-avatar-glass-normal);\n}\n.task-list-item mdc-avatar.telephony {\n  --mdc-avatar-default-foreground-color: var(--mds-color-theme-indicator-stable);\n}\n.task-list-item mdc-avatar.email {\n  --mdc-avatar-default-foreground-color: var(--mds-color-theme-common-touchbar-background-violet-normal);\n}\n.task-list-item mdc-avatar.chat {\n  --mdc-avatar-default-foreground-color: var(--mds-color-theme-indicator-secure);\n}\n.task-list-item .brand-visual-background {\n  width: 2rem;\n  height: 2rem;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-color: var(--mds-color-theme-avatar-glass-normal);\n  border-radius: 50%;\n  flex-shrink: 0;\n}\n.task-list-item .brand-visual-background mdc-brandvisual {\n  width: 1.25rem;\n  height: 1.25rem;\n}\n\n.task-text {\n  color: var(--mds-color-theme-text-secondary-normal);\n}\n\n.task-list-item--selected {\n  background: var(--mds-color-theme-background-primary-active);\n}\n.task-list-item--selected mdc-avatar {\n  --mdc-avatar-default-background-color: var(--mds-color-theme-avatar-glass-active, #FFFFFFCC);\n}\n.task-list-item--selected .brand-visual-background {\n  background-color: var(--mds-color-theme-avatar-glass-active, rgba(255, 255, 255, 0.8));\n}\n\n.task-button-container {\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n}\n\n.task-list-hover:hover {\n  background: none !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/Task/styles.scss?../../../node_modules/css-loader/dist/cjs.js!../../../node_modules/sass-loader/dist/cjs.js");
 
 /***/ }),
 
@@ -3175,7 +3175,7 @@ eval("\nvar __createBinding = (this && this.__createBinding) || (Object.create ?
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-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, toggleHold, toggleRecording, endCall, wrapupCall, wrapupCodes, isHeld, setIsHeld, isRecording, setIsRecording, buddyAgents, loadBuddyAgents, queues, loadQueues, transferCall, consultCall, consultInitiated, consultAccepted, callControlAudio, setConsultAgentName, setConsultAgentId, allowConsultToQueue, setLastTargetType, controlVisibility, } = 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 handleTargetSelect = (id, name, type) => {\n        if (agentMenuType === 'Consult') {\n            try {\n                consultCall(id, type);\n                setConsultAgentId(id);\n                setConsultAgentName(name);\n                setLastTargetType(type);\n            }\n            catch (error) {\n                throw new Error('Error during consult call', error);\n            }\n        }\n        else if (agentMenuType === 'Transfer') {\n            try {\n                transferCall(id, type);\n            }\n            catch (error) {\n                throw new Error('Error during transfer call', error);\n            }\n        }\n    };\n    const handlePopoverOpen = (menuType) => {\n        if (showAgentMenu && agentMenuType === menuType) {\n            setShowAgentMenu(false);\n            setAgentMenuType(null);\n        }\n        else {\n            setAgentMenuType(menuType);\n            setShowAgentMenu(true);\n            loadBuddyAgents();\n            loadQueues();\n        }\n    };\n    const buttons = [\n        {\n            id: 'hold',\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            isVisible: controlVisibility.holdResume,\n        },\n        {\n            id: 'consult',\n            icon: 'headset-bold',\n            tooltip: 'Consult with another agent',\n            className: 'call-control-button',\n            disabled: false,\n            menuType: 'Consult',\n            isVisible: controlVisibility.consult,\n        },\n        {\n            id: 'transfer',\n            icon: 'next-bold',\n            tooltip: 'Transfer call',\n            className: 'call-control-button',\n            disabled: false,\n            menuType: 'Transfer',\n            isVisible: controlVisibility.transfer,\n        },\n        {\n            id: 'record',\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            isVisible: controlVisibility.pauseResumeRecording,\n        },\n        {\n            id: 'end',\n            icon: 'cancel-regular',\n            onClick: endCall,\n            tooltip: 'End call',\n            className: 'call-control-button-cancel',\n            disabled: isHeld,\n            isVisible: controlVisibility.end,\n        },\n    ];\n    const filteredButtons = consultInitiated\n        ? buttons.filter((button) => !['hold', 'consult'].includes(button.id))\n        : buttons;\n    if (!currentTask)\n        return null;\n    return (react_1.default.createElement(react_1.default.Fragment, null,\n        react_1.default.createElement(\"audio\", { ref: (audioElement) => {\n                if (audioElement && callControlAudio) {\n                    audioElement.srcObject = callControlAudio;\n                }\n            }, id: \"remote-audio\", autoPlay: true }),\n        react_1.default.createElement(\"div\", { className: \"call-control-container\", \"data-testid\": \"call-control-container\" },\n            !consultAccepted && !controlVisibility.wrapup && (react_1.default.createElement(\"div\", { className: \"button-group\" }, filteredButtons.map((button, index) => {\n                if (!button.isVisible)\n                    return null;\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 || consultInitiated, \"data-testid\": \"ButtonCircle\", onPress: () => handlePopoverOpen(button.menuType) },\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, queues: queues, onAgentSelect: (agentId, agentName) => handleTargetSelect(agentId, agentName, 'agent'), onQueueSelect: (queueId, queueName) => handleTargetSelect(queueId, queueName, 'queue'), allowConsultToQueue: allowConsultToQueue })) : 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 || consultInitiated, \"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            controlVisibility.wrapup && (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?");
+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\"));\nconst utils_1 = __webpack_require__(/*! ../../../utils */ \"./src/utils/index.ts\");\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, toggleHold, toggleRecording, endCall, wrapupCall, wrapupCodes, isHeld, setIsHeld, isRecording, setIsRecording, buddyAgents, loadBuddyAgents, queues, loadQueues, transferCall, consultCall, consultInitiated, consultAccepted, callControlAudio, setConsultAgentName, setConsultAgentId, allowConsultToQueue, setLastTargetType, controlVisibility, } = 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 handleTargetSelect = (id, name, type) => {\n        if (agentMenuType === 'Consult') {\n            try {\n                consultCall(id, type);\n                setConsultAgentId(id);\n                setConsultAgentName(name);\n                setLastTargetType(type);\n            }\n            catch (error) {\n                throw new Error('Error during consult call', error);\n            }\n        }\n        else if (agentMenuType === 'Transfer') {\n            try {\n                transferCall(id, type);\n            }\n            catch (error) {\n                throw new Error('Error during transfer call', error);\n            }\n        }\n    };\n    const handlePopoverOpen = (menuType) => {\n        if (showAgentMenu && agentMenuType === menuType) {\n            setShowAgentMenu(false);\n            setAgentMenuType(null);\n        }\n        else {\n            setAgentMenuType(menuType);\n            setShowAgentMenu(true);\n            loadBuddyAgents();\n            loadQueues();\n        }\n    };\n    const currentMediaType = (0, utils_1.getMediaTypeInfo)(currentTask.data.interaction.mediaType, currentTask.data.interaction.mediaChannel);\n    const buttons = [\n        {\n            id: 'hold',\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            isVisible: controlVisibility.holdResume,\n        },\n        {\n            id: 'consult',\n            icon: 'headset-bold',\n            tooltip: 'Consult with another agent',\n            className: 'call-control-button',\n            disabled: false,\n            menuType: 'Consult',\n            isVisible: controlVisibility.consult,\n        },\n        {\n            id: 'transfer',\n            icon: 'next-bold',\n            tooltip: `Transfer ${currentMediaType.labelName}`,\n            className: 'call-control-button',\n            disabled: false,\n            menuType: 'Transfer',\n            isVisible: controlVisibility.transfer,\n        },\n        {\n            id: 'record',\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            isVisible: controlVisibility.pauseResumeRecording,\n        },\n        {\n            id: 'end',\n            icon: 'cancel-regular',\n            onClick: endCall,\n            tooltip: `End ${currentMediaType.labelName}`,\n            className: 'call-control-button-cancel',\n            disabled: isHeld,\n            isVisible: controlVisibility.end,\n        },\n    ];\n    const filteredButtons = consultInitiated\n        ? buttons.filter((button) => !['hold', 'consult'].includes(button.id))\n        : buttons;\n    if (!currentTask)\n        return null;\n    return (react_1.default.createElement(react_1.default.Fragment, null,\n        react_1.default.createElement(\"audio\", { ref: (audioElement) => {\n                if (audioElement && callControlAudio) {\n                    audioElement.srcObject = callControlAudio;\n                }\n            }, id: \"remote-audio\", autoPlay: true }),\n        react_1.default.createElement(\"div\", { className: \"call-control-container\", \"data-testid\": \"call-control-container\" },\n            !consultAccepted && !controlVisibility.wrapup && (react_1.default.createElement(\"div\", { className: \"button-group\" }, filteredButtons.map((button, index) => {\n                if (!button.isVisible)\n                    return null;\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 || consultInitiated, \"data-testid\": \"ButtonCircle\", onPress: () => handlePopoverOpen(button.menuType) },\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, queues: queues, onAgentSelect: (agentId, agentName) => handleTargetSelect(agentId, agentName, 'agent'), onQueueSelect: (queueId, queueName) => handleTargetSelect(queueId, queueName, 'queue'), allowConsultToQueue: allowConsultToQueue })) : 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 || consultInitiated, \"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            controlVisibility.wrapup && (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?");
 
 /***/ }),
 
@@ -3186,7 +3186,7 @@ eval("\nvar __createBinding = (this && this.__createBinding) || (Object.create ?
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-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 Task_1 = __importDefault(__webpack_require__(/*! ../Task */ \"./src/components/task/Task/index.tsx\"));\nconst IncomingTaskComponent = (props) => {\n    var _a, _b, _c, _d;\n    const { incomingTask, isBrowser, accept, reject } = props;\n    if (!incomingTask) {\n        return react_1.default.createElement(react_1.default.Fragment, null); // hidden component\n    }\n    const callAssociationDetails = (_b = (_a = incomingTask === null || incomingTask === void 0 ? void 0 : incomingTask.data) === null || _a === void 0 ? void 0 : _a.interaction) === null || _b === void 0 ? void 0 : _b.callAssociatedDetails;\n    const ani = callAssociationDetails === null || callAssociationDetails === void 0 ? void 0 : callAssociationDetails.ani;\n    const virtualTeamName = callAssociationDetails === null || callAssociationDetails === void 0 ? void 0 : callAssociationDetails.virtualTeamName;\n    const ronaTimeout = (callAssociationDetails === null || callAssociationDetails === void 0 ? void 0 : callAssociationDetails.ronaTimeout) ? Number(callAssociationDetails === null || callAssociationDetails === void 0 ? void 0 : callAssociationDetails.ronaTimeout) : null;\n    const startTimeStamp = (_d = (_c = incomingTask === null || incomingTask === void 0 ? void 0 : incomingTask.data) === null || _c === void 0 ? void 0 : _c.interaction) === null || _d === void 0 ? void 0 : _d.createdTimestamp;\n    const isTelephony = incomingTask.data.interaction.mediaType === 'telephony';\n    const acceptText = !incomingTask.data.wrapUpRequired ? (isTelephony && !isBrowser ? 'Ringing' : 'Accept') : undefined;\n    const declineText = !incomingTask.data.wrapUpRequired && isTelephony && isBrowser ? 'Decline' : undefined;\n    return (react_1.default.createElement(Task_1.default, { interactionId: incomingTask.data.interactionId, title: ani, state: \"\", startTimeStamp: startTimeStamp, isIncomingTask: true, queue: virtualTeamName, acceptTask: () => accept(incomingTask), declineTask: () => reject(incomingTask), ronaTimeout: ronaTimeout, acceptText: acceptText, disableAccept: isTelephony && !isBrowser, declineText: declineText, styles: \"task-list-hover\" }));\n};\nexports[\"default\"] = IncomingTaskComponent;\n\n\n//# sourceURL=webpack://@webex/cc-components/./src/components/task/IncomingTask/incoming-task.tsx?");
+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 task_types_1 = __webpack_require__(/*! ../task.types */ \"./src/components/task/task.types.ts\");\nconst Task_1 = __importDefault(__webpack_require__(/*! ../Task */ \"./src/components/task/Task/index.tsx\"));\nconst IncomingTaskComponent = (props) => {\n    var _a, _b, _c, _d;\n    const { incomingTask, isBrowser, accept, reject } = props;\n    if (!incomingTask) {\n        return react_1.default.createElement(react_1.default.Fragment, null); // hidden component\n    }\n    const callAssociationDetails = (_b = (_a = incomingTask === null || incomingTask === void 0 ? void 0 : incomingTask.data) === null || _a === void 0 ? void 0 : _a.interaction) === null || _b === void 0 ? void 0 : _b.callAssociatedDetails;\n    const ani = callAssociationDetails === null || callAssociationDetails === void 0 ? void 0 : callAssociationDetails.ani;\n    const virtualTeamName = callAssociationDetails === null || callAssociationDetails === void 0 ? void 0 : callAssociationDetails.virtualTeamName;\n    const ronaTimeout = (callAssociationDetails === null || callAssociationDetails === void 0 ? void 0 : callAssociationDetails.ronaTimeout) ? Number(callAssociationDetails === null || callAssociationDetails === void 0 ? void 0 : callAssociationDetails.ronaTimeout) : null;\n    const startTimeStamp = (_d = (_c = incomingTask === null || incomingTask === void 0 ? void 0 : incomingTask.data) === null || _c === void 0 ? void 0 : _c.interaction) === null || _d === void 0 ? void 0 : _d.createdTimestamp;\n    const mediaType = incomingTask.data.interaction.mediaType;\n    const mediaChannel = incomingTask.data.interaction.mediaChannel;\n    const isTelephony = mediaType === task_types_1.MEDIA_CHANNEL.TELEPHONY;\n    const acceptText = !incomingTask.data.wrapUpRequired\n        ? isTelephony && !isBrowser\n            ? 'Ringing...'\n            : 'Accept'\n        : undefined;\n    const declineText = !incomingTask.data.wrapUpRequired && isTelephony && isBrowser ? 'Decline' : undefined;\n    return (react_1.default.createElement(Task_1.default, { interactionId: incomingTask.data.interactionId, title: ani, state: \"\", startTimeStamp: startTimeStamp, isIncomingTask: true, queue: virtualTeamName, acceptTask: () => accept(incomingTask), declineTask: () => reject(incomingTask), ronaTimeout: ronaTimeout, acceptText: acceptText, disableAccept: isTelephony && !isBrowser, declineText: declineText, styles: \"task-list-hover\", mediaType: mediaType, mediaChannel: mediaChannel }));\n};\nexports[\"default\"] = IncomingTaskComponent;\n\n\n//# sourceURL=webpack://@webex/cc-components/./src/components/task/IncomingTask/incoming-task.tsx?");
 
 /***/ }),
 
@@ -3208,7 +3208,7 @@ eval("\nvar __createBinding = (this && this.__createBinding) || (Object.create ?
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-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 TaskTimer_1 = __importDefault(__webpack_require__(/*! ../TaskTimer */ \"./src/components/task/TaskTimer/index.tsx\"));\n__webpack_require__(/*! ./styles.scss */ \"./src/components/task/Task/styles.scss\");\nconst Task = ({ title, state, startTimeStamp, ronaTimeout, selected = false, styles, isIncomingTask = false, queue, acceptTask, declineTask, interactionId, onTaskSelect, acceptText, disableAccept = false, declineText, }) => {\n    const capitalizeFirstWord = (str) => {\n        return str.replace(/^\\s*(\\w)/, (match, firstLetter) => firstLetter.toUpperCase());\n    };\n    return (react_1.default.createElement(react_collaboration_1.ListItemBase, { className: `task-list-item ${selected ? 'task-list-item--selected' : ''} ${styles}`, onPress: onTaskSelect ? onTaskSelect : undefined, id: interactionId },\n        react_1.default.createElement(react_collaboration_1.ListItemBaseSection, { position: \"start\" },\n            react_1.default.createElement(react_2.Avatar, { \"icon-name\": \"handset-filled\" })),\n        react_1.default.createElement(react_collaboration_1.ListItemBaseSection, { position: \"fill\" },\n            react_1.default.createElement(\"section\", { className: \"task-details\" },\n                title && (react_1.default.createElement(react_collaboration_1.Text, { tagName: \"span\", type: selected ? 'body-large-bold' : 'body-large-medium' }, title)),\n                state && !isIncomingTask && (react_1.default.createElement(react_collaboration_1.Text, { tagName: \"span\", type: \"body-midsize-regular\", className: \"task-text\" }, capitalizeFirstWord(state))),\n                queue && isIncomingTask && (react_1.default.createElement(react_collaboration_1.Text, { tagName: \"span\", type: \"body-midsize-regular\", className: \"task-text\" }, capitalizeFirstWord(queue))),\n                (isIncomingTask && !ronaTimeout) || !isIncomingTask\n                    ? startTimeStamp && (react_1.default.createElement(react_collaboration_1.Text, { tagName: \"span\", type: \"body-midsize-regular\", className: \"task-text\" },\n                        \"Handle Time: \",\n                        '  ',\n                        react_1.default.createElement(TaskTimer_1.default, { startTimeStamp: startTimeStamp })))\n                    : null,\n                isIncomingTask && ronaTimeout && (react_1.default.createElement(react_collaboration_1.Text, { tagName: \"span\", type: \"body-midsize-regular\", className: \"task-text\" },\n                    \"Time Left: \",\n                    '  ',\n                    react_1.default.createElement(TaskTimer_1.default, { countdown: true, ronaTimeout: ronaTimeout }))))),\n        react_1.default.createElement(react_collaboration_1.ListItemBaseSection, { position: \"end\" },\n            react_1.default.createElement(\"div\", { className: \"task-button-container\" },\n                acceptText ? (react_1.default.createElement(react_collaboration_1.ButtonPill, { onPress: acceptTask, color: \"join\", disabled: disableAccept }, acceptText)) : null,\n                declineText ? (react_1.default.createElement(react_collaboration_1.ButtonPill, { onPress: declineTask, color: \"cancel\" }, declineText)) : null))));\n};\nexports[\"default\"] = Task;\n\n\n//# sourceURL=webpack://@webex/cc-components/./src/components/task/Task/index.tsx?");
+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 TaskTimer_1 = __importDefault(__webpack_require__(/*! ../TaskTimer */ \"./src/components/task/TaskTimer/index.tsx\"));\nconst utils_1 = __webpack_require__(/*! ../../../utils */ \"./src/utils/index.ts\");\n__webpack_require__(/*! ./styles.scss */ \"./src/components/task/Task/styles.scss\");\nconst Task = ({ title, state, startTimeStamp, ronaTimeout, selected = false, styles, isIncomingTask = false, queue, acceptTask, declineTask, interactionId, onTaskSelect, acceptText, disableAccept = false, declineText, mediaType, mediaChannel, }) => {\n    const capitalizeFirstWord = (str) => {\n        return str.replace(/^\\s*(\\w)/, (match, firstLetter) => firstLetter.toUpperCase());\n    };\n    const currentMediaType = (0, utils_1.getMediaTypeInfo)(mediaType, mediaChannel);\n    return (react_1.default.createElement(react_collaboration_1.ListItemBase, { className: `task-list-item ${selected ? 'task-list-item--selected' : ''} ${styles}`, onPress: onTaskSelect ? onTaskSelect : undefined, id: interactionId },\n        react_1.default.createElement(react_collaboration_1.ListItemBaseSection, { position: \"start\" }, currentMediaType.isBrandVisual ? (react_1.default.createElement(\"div\", { className: \"brand-visual-background\" },\n            react_1.default.createElement(react_2.Brandvisual, { name: currentMediaType.iconName, className: currentMediaType.className }))) : (react_1.default.createElement(react_2.Avatar, { \"icon-name\": currentMediaType.iconName, className: currentMediaType.className }))),\n        react_1.default.createElement(react_collaboration_1.ListItemBaseSection, { position: \"fill\" },\n            react_1.default.createElement(\"section\", { className: \"task-details\" },\n                title && (react_1.default.createElement(react_collaboration_1.Text, { tagName: \"span\", type: selected ? 'body-large-bold' : 'body-large-medium' }, title)),\n                state && !isIncomingTask && (react_1.default.createElement(react_collaboration_1.Text, { tagName: \"span\", type: \"body-midsize-regular\", className: \"task-text\" }, capitalizeFirstWord(state))),\n                queue && isIncomingTask && (react_1.default.createElement(react_collaboration_1.Text, { tagName: \"span\", type: \"body-midsize-regular\", className: \"task-text\" }, capitalizeFirstWord(queue))),\n                (isIncomingTask && !ronaTimeout) || !isIncomingTask\n                    ? startTimeStamp && (react_1.default.createElement(react_collaboration_1.Text, { tagName: \"span\", type: \"body-midsize-regular\", className: \"task-text\" },\n                        \"Handle Time: \",\n                        '  ',\n                        react_1.default.createElement(TaskTimer_1.default, { startTimeStamp: startTimeStamp })))\n                    : null,\n                isIncomingTask && ronaTimeout && (react_1.default.createElement(react_collaboration_1.Text, { tagName: \"span\", type: \"body-midsize-regular\", className: \"task-text\" },\n                    \"Time Left: \",\n                    '  ',\n                    react_1.default.createElement(TaskTimer_1.default, { countdown: true, ronaTimeout: ronaTimeout }))))),\n        react_1.default.createElement(react_collaboration_1.ListItemBaseSection, { position: \"end\" },\n            react_1.default.createElement(\"div\", { className: \"task-button-container\" },\n                acceptText ? (react_1.default.createElement(react_collaboration_1.ButtonPill, { onPress: acceptTask, color: \"join\", disabled: disableAccept }, acceptText)) : null,\n                declineText ? (react_1.default.createElement(react_collaboration_1.ButtonPill, { onPress: declineTask, color: \"cancel\" }, declineText)) : null))));\n};\nexports[\"default\"] = Task;\n\n\n//# sourceURL=webpack://@webex/cc-components/./src/components/task/Task/index.tsx?");
 
 /***/ }),
 
@@ -3219,7 +3219,7 @@ eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-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 Task_1 = __importDefault(__webpack_require__(/*! ../Task */ \"./src/components/task/Task/index.tsx\"));\n__webpack_require__(/*! ./styles.scss */ \"./src/components/task/TaskList/styles.scss\");\nconst TaskListComponent = (props) => {\n    var _a;\n    const { currentTask, taskList, acceptTask, declineTask, isBrowser, onTaskSelect } = props;\n    if (!taskList || Object.keys(taskList).length === 0) {\n        return react_1.default.createElement(react_1.default.Fragment, null); // hidden component\n    }\n    return (react_1.default.createElement(\"ul\", { className: \"task-list\" }, (_a = Object.values(taskList)) === null || _a === void 0 ? void 0 : _a.map((task, index) => {\n        var _a, _b;\n        const callAssociationDetails = (_b = (_a = task === null || task === void 0 ? void 0 : task.data) === null || _a === void 0 ? void 0 : _a.interaction) === null || _b === void 0 ? void 0 : _b.callAssociatedDetails;\n        const ani = callAssociationDetails === null || callAssociationDetails === void 0 ? void 0 : callAssociationDetails.ani;\n        const virtualTeamName = callAssociationDetails === null || callAssociationDetails === void 0 ? void 0 : callAssociationDetails.virtualTeamName;\n        // rona timeout is not always available in the callAssociatedDetails object\n        const ronaTimeout = (callAssociationDetails === null || callAssociationDetails === void 0 ? void 0 : callAssociationDetails.ronaTimeout) ? Number(callAssociationDetails === null || callAssociationDetails === void 0 ? void 0 : callAssociationDetails.ronaTimeout) : null;\n        const taskState = task.data.interaction.state;\n        const startTimeStamp = task.data.interaction.createdTimestamp;\n        const isIncomingTask = taskState === 'new' || taskState === 'consult';\n        const isTelephony = task.data.interaction.mediaType === 'telephony';\n        const acceptText = isIncomingTask && !task.data.wrapUpRequired ? (isTelephony && !isBrowser ? 'Ringing' : 'Accept') : undefined;\n        const declineText = isIncomingTask && !task.data.wrapUpRequired && isTelephony && isBrowser ? 'Decline' : undefined;\n        return (react_1.default.createElement(Task_1.default, { interactionId: task.data.interactionId, title: ani, state: !isIncomingTask ? taskState : '', startTimeStamp: startTimeStamp, selected: (currentTask === null || currentTask === void 0 ? void 0 : currentTask.data.interactionId) === task.data.interactionId, key: index, isIncomingTask: isIncomingTask, queue: virtualTeamName, acceptTask: () => acceptTask(task), declineTask: () => declineTask(task), ronaTimeout: isIncomingTask ? ronaTimeout : null, onTaskSelect: () => {\n                if ((currentTask === null || currentTask === void 0 ? void 0 : currentTask.data.interactionId) !== task.data.interactionId &&\n                    !(isIncomingTask && !task.data.wrapUpRequired)) {\n                    onTaskSelect(task);\n                }\n            }, acceptText: acceptText, disableAccept: isIncomingTask && isTelephony && !isBrowser, declineText: declineText }));\n    })));\n};\nexports[\"default\"] = TaskListComponent;\n\n\n//# sourceURL=webpack://@webex/cc-components/./src/components/task/TaskList/task-list.tsx?");
+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 task_types_1 = __webpack_require__(/*! ../task.types */ \"./src/components/task/task.types.ts\");\nconst Task_1 = __importDefault(__webpack_require__(/*! ../Task */ \"./src/components/task/Task/index.tsx\"));\n__webpack_require__(/*! ./styles.scss */ \"./src/components/task/TaskList/styles.scss\");\nconst TaskListComponent = (props) => {\n    var _a;\n    const { currentTask, taskList, acceptTask, declineTask, isBrowser, onTaskSelect } = props;\n    if (!taskList || Object.keys(taskList).length === 0) {\n        return react_1.default.createElement(react_1.default.Fragment, null); // hidden component\n    }\n    return (react_1.default.createElement(\"ul\", { className: \"task-list\" }, (_a = Object.values(taskList)) === null || _a === void 0 ? void 0 : _a.map((task, index) => {\n        var _a, _b;\n        const callAssociationDetails = (_b = (_a = task === null || task === void 0 ? void 0 : task.data) === null || _a === void 0 ? void 0 : _a.interaction) === null || _b === void 0 ? void 0 : _b.callAssociatedDetails;\n        const ani = callAssociationDetails === null || callAssociationDetails === void 0 ? void 0 : callAssociationDetails.ani;\n        const virtualTeamName = callAssociationDetails === null || callAssociationDetails === void 0 ? void 0 : callAssociationDetails.virtualTeamName;\n        // rona timeout is not always available in the callAssociatedDetails object\n        const ronaTimeout = (callAssociationDetails === null || callAssociationDetails === void 0 ? void 0 : callAssociationDetails.ronaTimeout) ? Number(callAssociationDetails === null || callAssociationDetails === void 0 ? void 0 : callAssociationDetails.ronaTimeout) : null;\n        const taskState = task.data.interaction.state;\n        const startTimeStamp = task.data.interaction.createdTimestamp;\n        const isIncomingTask = taskState === 'new' || taskState === 'consult';\n        const mediaType = task.data.interaction.mediaType;\n        const mediaChannel = task.data.interaction.mediaChannel;\n        const isTelephony = mediaType === task_types_1.MEDIA_CHANNEL.TELEPHONY;\n        const acceptText = isIncomingTask && !task.data.wrapUpRequired\n            ? isTelephony && !isBrowser\n                ? 'Ringing...'\n                : 'Accept'\n            : undefined;\n        const declineText = isIncomingTask && !task.data.wrapUpRequired && isTelephony && isBrowser ? 'Decline' : undefined;\n        return (react_1.default.createElement(Task_1.default, { interactionId: task.data.interactionId, title: ani, state: !isIncomingTask ? taskState : '', startTimeStamp: startTimeStamp, selected: (currentTask === null || currentTask === void 0 ? void 0 : currentTask.data.interactionId) === task.data.interactionId, key: index, isIncomingTask: isIncomingTask, queue: virtualTeamName, acceptTask: () => acceptTask(task), declineTask: () => declineTask(task), ronaTimeout: isIncomingTask ? ronaTimeout : null, onTaskSelect: () => {\n                if ((currentTask === null || currentTask === void 0 ? void 0 : currentTask.data.interactionId) !== task.data.interactionId &&\n                    !(isIncomingTask && !task.data.wrapUpRequired)) {\n                    onTaskSelect(task);\n                }\n            }, acceptText: acceptText, disableAccept: isIncomingTask && isTelephony && !isBrowser, declineText: declineText, mediaType: mediaType, mediaChannel: mediaChannel }));\n    })));\n};\nexports[\"default\"] = TaskListComponent;\n\n\n//# sourceURL=webpack://@webex/cc-components/./src/components/task/TaskList/task-list.tsx?");
 
 /***/ }),
 
@@ -3234,14 +3234,25 @@ eval("\nvar __createBinding = (this && this.__createBinding) || (Object.create ?
 
 /***/ }),
 
+/***/ "./src/components/task/task.types.ts":
+/*!*******************************************!*\
+  !*** ./src/components/task/task.types.ts ***!
+  \*******************************************/
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+"use strict";
+eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.MEDIA_CHANNEL = exports.DestinationType = void 0;\nconst cc_store_1 = __webpack_require__(/*! @webex/cc-store */ \"@webex/cc-store\");\nObject.defineProperty(exports, \"DestinationType\", ({ enumerable: true, get: function () { return cc_store_1.DestinationType; } }));\nexports.MEDIA_CHANNEL = {\n    EMAIL: 'email',\n    CHAT: 'chat',\n    TELEPHONY: 'telephony',\n    SOCIAL: 'social',\n    SMS: 'sms',\n    FACEBOOK: 'facebook',\n    WHATSAPP: 'whatsapp',\n    APPLE: 'applemessages',\n};\n\n\n//# sourceURL=webpack://@webex/cc-components/./src/components/task/task.types.ts?");
+
+/***/ }),
+
 /***/ "./src/utils/index.ts":
 /*!****************************!*\
   !*** ./src/utils/index.ts ***!
   \****************************/
-/***/ ((__unused_webpack_module, exports) => {
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
 "use strict";
-eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.formatTime = void 0;\nconst formatTime = (time) => {\n    const hours = Math.floor(time / 3600);\n    const minutes = Math.floor((time % 3600) / 60);\n    const seconds = time % 60;\n    // Display full format with hours if time is 1 hour or more\n    if (hours > 0) {\n        return `${hours.toString().padStart(2, '0')}:${minutes\n            .toString()\n            .padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;\n    }\n    // Less than 1 hour: display mm:ss with two-digit padding for minutes\n    return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;\n};\nexports.formatTime = formatTime;\n\n\n//# sourceURL=webpack://@webex/cc-components/./src/utils/index.ts?");
+eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.getMediaTypeInfo = exports.formatTime = void 0;\nconst task_types_1 = __webpack_require__(/*! ../components/task/task.types */ \"./src/components/task/task.types.ts\");\nconst formatTime = (time) => {\n    const hours = Math.floor(time / 3600);\n    const minutes = Math.floor((time % 3600) / 60);\n    const seconds = time % 60;\n    // Display full format with hours if time is 1 hour or more\n    if (hours > 0) {\n        return `${hours.toString().padStart(2, '0')}:${minutes\n            .toString()\n            .padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;\n    }\n    // Less than 1 hour: display mm:ss with two-digit padding for minutes\n    return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;\n};\nexports.formatTime = formatTime;\n/**\n * Returns media information (icon, class, label, and brand visual flag)\n * based on the provided mediaType and mediaChannel.\n *\n * - If the mediaType is SOCIAL, it checks mediaChannel-specific mappings\n *   like Facebook, WhatsApp, and Apple Chat.\n * - For other mediaTypes (e.g., TELEPHONY, EMAIL, CHAT), it uses a direct map.\n * - If no match is found, a default media info is returned for TELEPHONY or SOCIAL.\n *\n * This utility consolidates icon metadata and display label logic for consistent rendering.\n *\n * @param mediaType - The primary media type (e.g., TELEPHONY, EMAIL, SOCIAL)\n * @param mediaChannel - The secondary channel for SOCIAL types (e.g., FACEBOOK, WHATSAPP)\n * @returns MediaInfo object with iconName, className, labelName, and isBrandVisual flag\n */\nconst getMediaTypeInfo = (mediaType, mediaChannel) => {\n    var _a, _b;\n    const socialMap = {\n        [task_types_1.MEDIA_CHANNEL.FACEBOOK]: {\n            iconName: 'social-facebook-color',\n            className: task_types_1.MEDIA_CHANNEL.FACEBOOK,\n            labelName: 'FB messenger',\n            isBrandVisual: true,\n        },\n        [task_types_1.MEDIA_CHANNEL.WHATSAPP]: {\n            iconName: 'social-whatsapp-color',\n            className: task_types_1.MEDIA_CHANNEL.WHATSAPP,\n            labelName: 'Whatsapp',\n            isBrandVisual: true,\n        },\n        [task_types_1.MEDIA_CHANNEL.APPLE]: {\n            iconName: 'apple-business-chat-color',\n            className: task_types_1.MEDIA_CHANNEL.APPLE,\n            labelName: 'Apple Chat',\n            isBrandVisual: true,\n        },\n    };\n    const typeMap = {\n        [task_types_1.MEDIA_CHANNEL.TELEPHONY]: {\n            iconName: 'handset-filled',\n            className: task_types_1.MEDIA_CHANNEL.TELEPHONY,\n            labelName: 'Call',\n            isBrandVisual: false,\n        },\n        [task_types_1.MEDIA_CHANNEL.EMAIL]: {\n            iconName: 'email-filled',\n            className: task_types_1.MEDIA_CHANNEL.EMAIL,\n            labelName: 'Email',\n            isBrandVisual: false,\n        },\n        [task_types_1.MEDIA_CHANNEL.CHAT]: {\n            iconName: 'chat-filled',\n            className: task_types_1.MEDIA_CHANNEL.CHAT,\n            labelName: 'Chat',\n            isBrandVisual: false,\n        },\n    };\n    if (mediaType === task_types_1.MEDIA_CHANNEL.SOCIAL) {\n        return ((_a = socialMap[mediaChannel]) !== null && _a !== void 0 ? _a : {\n            iconName: 'chat-filled',\n            className: task_types_1.MEDIA_CHANNEL.SOCIAL,\n            labelName: 'Chat',\n            isBrandVisual: false,\n        });\n    }\n    return ((_b = typeMap[mediaType]) !== null && _b !== void 0 ? _b : {\n        iconName: 'handset-filled',\n        className: task_types_1.MEDIA_CHANNEL.TELEPHONY,\n        labelName: 'Call',\n        isBrandVisual: false,\n    });\n};\nexports.getMediaTypeInfo = getMediaTypeInfo;\n\n\n//# sourceURL=webpack://@webex/cc-components/./src/utils/index.ts?");
 
 /***/ }),
 
@@ -3267,6 +3278,17 @@ module.exports = require("@momentum-ui/react-collaboration");
 
 /***/ }),
 
+/***/ "@webex/cc-store":
+/*!**********************************!*\
+  !*** external "@webex/cc-store" ***!
+  \**********************************/
+/***/ ((module) => {
+
+"use strict";
+module.exports = require("@webex/cc-store");
+
+/***/ }),
+
 /***/ "react":
 /*!************************!*\
   !*** external "react" ***!

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@webex/cc-components",
   "description": "Webex Contact Center UI Components Library for your custom contact center solutions",
-  "version": "1.28.0-ccwidgets.54",
+  "version": "1.28.0-ccwidgets.56",
   "main": "dist/index.js",
   "publishConfig": {
     "access": "public"
@@ -25,7 +25,7 @@
   },
   "dependencies": {
     "@r2wc/react-to-web-component": "2.0.3",
-    "@webex/cc-store": "1.28.0-ccwidgets.54"
+    "@webex/cc-store": "1.28.0-ccwidgets.56"
   },
   "devDependencies": {
     "@babel/core": "7.25.2",