@webex/cc-components 1.28.0-ccwidgets.51 → 1.28.0-ccwidgets.52
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js
CHANGED
|
@@ -2889,7 +2889,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
|
|
|
2889
2889
|
/***/ ((module, __webpack_exports__, __webpack_require__) => {
|
|
2890
2890
|
|
|
2891
2891
|
"use strict";
|
|
2892
|
-
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, `.user-state-container {\n position: relative;\n width: 100%; /* Ensure the select trigger takes the full width of its parent */\n display: flex;\n align-items: center;\n justify-content: space-between; /* Space out the elements within the select trigger */\n}\n\n.select-trigger .md-select {\n width: 100%; /* Ensure the SelectNext component takes the full width of its parent */\n}\n\n.elapsedTime {\n position: absolute;\n right: 2rem; /* Adjusted to leave space for the arrow icon */\n top: 50%;\n transform: translateY(-50%);\n display: flex;\n align-items: center;\n pointer-events: none;\n z-index: 1;\n color: var(--mds-color-theme-text-primary-normal);\n white-space: nowrap; /* Prevent the text from wrapping */\n padding: 0 0.5rem; /* Add some padding */\n border-radius: 0.25rem; /* Add some border radius */\n}\n\n.state-name {\n color: var(--mds-color-theme-text-primary-normal);\n}\n\n.elapsedTime-disabled {\n color: #ccc;\n}\n\n.item-container {\n display: flex;\n align-items: center;\n gap: 0.25rem;\n}\n\n.hide-this {\n display: none;\n}\n\n.state-icon {\n --mdc-icon-fill-color: var(--mds-color-theme-indicator-stable);\n}\n.state-icon.idle {\n --mdc-icon-fill-color: var(--mds-color-theme-indicator-locked);\n}\n.state-icon.rona {\n --mdc-icon-fill-color: var(--mds-color-theme-outline-cancel-normal);\n}\n.state-icon.custom {\n --mdc-icon-fill-color: var(--mds-color-theme-text-team-gold-hover);\n}\n\n.state-select {\n width: 100%;\n --mds-color-theme-background-primary-active: var(--mds-color-theme-background-alert-success-normal);\n}\n.state-select .md-select-dropdown-input {\n background-color: var(--mds-color-theme-background-alert-success-normal);\n}\n.state-select.idle {\n width: 100%;\n --mds-color-theme-background-primary-active: var(--mds-color-theme-background-primary-active);\n}\n.state-select.idle .md-select-dropdown-input {\n background-color: var(--mds-color-theme-background-secondary-normal);\n}\n.state-select.rona {\n width: 100%;\n --mds-color-theme-background-primary-active: var(--mds-color-theme-background-alert-error-active);\n}\n.state-select.rona .md-select-dropdown-input {\n background-color: var(--mds-color-theme-background-alert-error-normal);\n border: 1px solid var(--mds-color-theme-outline-cancel-normal);\n}\n.state-select.custom {\n width: 100%;\n --mds-color-theme-background-primary-active: var(--mds-color-theme-background-alert-warning-active);\n}\n.state-select.custom .md-select-dropdown-input {\n background-color: var(--mds-color-theme-background-alert-warning-normal);\n border: 1px solid var(--mds-color-theme-text-team-gold-hover);\n}\n.state-select .md-select-popover ul li[data-key^=hide-] {\n display: none;\n}\n\n.select-arrow-icon {\n position: absolute;\n right: 1rem; /* Adjusted to leave space for the arrow icon */\n top: 50%;\n transform: translateY(-50%);\n display: flex;\n align-items: center;\n pointer-events: none;\n z-index: 1;\n}`, \"\"]);\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://@webex/cc-components/./src/components/UserState/user-state.scss?../../../node_modules/css-loader/dist/cjs.js!../../../node_modules/sass-loader/dist/cjs.js");
|
|
2892
|
+
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, `.user-state-container {\n position: relative;\n width: 100%; /* Ensure the select trigger takes the full width of its parent */\n display: flex;\n align-items: center;\n justify-content: space-between; /* Space out the elements within the select trigger */\n}\n\n.select-trigger .md-select {\n width: 100%; /* Ensure the SelectNext component takes the full width of its parent */\n}\n\n.elapsedTime {\n position: absolute;\n right: 2rem; /* Adjusted to leave space for the arrow icon */\n top: 50%;\n transform: translateY(-50%);\n display: flex;\n align-items: center;\n pointer-events: none;\n z-index: 1;\n color: var(--mds-color-theme-text-primary-normal);\n white-space: nowrap; /* Prevent the text from wrapping */\n padding: 0 0.5rem; /* Add some padding */\n border-radius: 0.25rem; /* Add some border radius */\n}\n\n.state-name {\n color: var(--mds-color-theme-text-primary-normal);\n}\n.state-name.rona {\n color: var(--mds-color-theme-text-error-normal);\n}\n.state-name.custom {\n color: var(--mds-color-theme-text-warning-normal);\n}\n\n.elapsedTime-disabled {\n color: #ccc;\n}\n\n.item-container {\n display: flex;\n align-items: center;\n gap: 0.25rem;\n}\n\n.hide-this {\n display: none;\n}\n\n.state-icon {\n --mdc-icon-fill-color: var(--mds-color-theme-indicator-stable);\n}\n.state-icon.idle {\n --mdc-icon-fill-color: var(--mds-color-theme-indicator-locked);\n}\n.state-icon.rona {\n --mdc-icon-fill-color: var(--mds-color-theme-outline-cancel-normal);\n}\n.state-icon.custom {\n --mdc-icon-fill-color: var(--mds-color-theme-text-team-gold-hover);\n}\n\n.state-select {\n width: 100%;\n --mds-color-theme-background-primary-active: var(--mds-color-theme-background-alert-success-normal);\n}\n.state-select .md-select-dropdown-input {\n background-color: var(--mds-color-theme-background-alert-success-normal);\n}\n.state-select.idle {\n width: 100%;\n --mds-color-theme-background-primary-active: var(--mds-color-theme-background-primary-active);\n}\n.state-select.idle .md-select-dropdown-input {\n background-color: var(--mds-color-theme-background-secondary-normal);\n}\n.state-select.rona {\n width: 100%;\n --mds-color-theme-background-primary-active: var(--mds-color-theme-background-alert-error-active);\n}\n.state-select.rona .md-select-dropdown-input {\n background-color: var(--mds-color-theme-background-alert-error-normal);\n border: 1px solid var(--mds-color-theme-outline-cancel-normal);\n}\n.state-select.custom {\n width: 100%;\n --mds-color-theme-background-primary-active: var(--mds-color-theme-background-alert-warning-active);\n}\n.state-select.custom .md-select-dropdown-input {\n background-color: var(--mds-color-theme-background-alert-warning-normal);\n border: 1px solid var(--mds-color-theme-text-team-gold-hover);\n}\n.state-select.available {\n width: 100%;\n --mds-color-theme-background-primary-active: var(--mds-color-theme-background-alert-success-normal);\n}\n.state-select.available .md-select-dropdown-input {\n background-color: var(--mds-color-theme-background-alert-success-normal);\n border: 1px solid var(--mds-color-theme-outline-join-normal);\n}\n.state-select .md-select-popover ul li[data-key^=hide-] {\n display: none;\n}\n.state-select .item-container.selected.available .state-icon {\n --mdc-icon-fill-color: var(--mds-color-theme-outline-join-normal);\n}\n.state-select .item-container.selected.available .state-name {\n color: var(--mds-color-theme-outline-join-normal);\n}\n.state-select .item-container.selected.idle .state-icon {\n --mdc-icon-fill-color: var(--mds-color-theme-text-primary-normal);\n}\n.state-select .item-container.selected.idle .state-name {\n color: var(--mds-color-theme-text-primary-normal);\n}\n\n.select-arrow-icon {\n position: absolute;\n right: 1rem; /* Adjusted to leave space for the arrow icon */\n top: 50%;\n transform: translateY(-50%);\n display: flex;\n align-items: center;\n pointer-events: none;\n z-index: 1;\n}`, \"\"]);\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://@webex/cc-components/./src/components/UserState/user-state.scss?../../../node_modules/css-loader/dist/cjs.js!../../../node_modules/sass-loader/dist/cjs.js");
|
|
2893
2893
|
|
|
2894
2894
|
/***/ }),
|
|
2895
2895
|
|
|
@@ -3153,7 +3153,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\n\n\n
|
|
|
3153
3153
|
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
|
|
3154
3154
|
|
|
3155
3155
|
"use strict";
|
|
3156
|
-
eval("\nvar
|
|
3156
|
+
eval("\nvar __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n var desc = Object.getOwnPropertyDescriptor(m, k);\n if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\n desc = { enumerable: true, get: function() { return m[k]; } };\n }\n Object.defineProperty(o, k2, desc);\n}) : (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n o[k2] = m[k];\n}));\nvar __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {\n Object.defineProperty(o, \"default\", { enumerable: true, value: v });\n}) : function(o, v) {\n o[\"default\"] = v;\n});\nvar __importStar = (this && this.__importStar) || function (mod) {\n if (mod && mod.__esModule) return mod;\n var result = {};\n if (mod != null) for (var k in mod) if (k !== \"default\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);\n __setModuleDefault(result, mod);\n return result;\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst react_1 = __importStar(__webpack_require__(/*! react */ \"react\"));\nconst user_state_types_1 = __webpack_require__(/*! ./user-state.types */ \"./src/components/UserState/user-state.types.ts\");\nconst utils_1 = __webpack_require__(/*! ../../utils */ \"./src/utils/index.ts\");\n__webpack_require__(/*! ./user-state.scss */ \"./src/components/UserState/user-state.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 UserStateComponent = (props) => {\n const { idleCodes, setAgentStatus, isSettingAgentStatus, elapsedTime, lastIdleStateChangeElapsedTime, currentState, customState, } = props;\n const previousSelectableState = (0, react_1.useMemo)(() => {\n var _a, _b;\n return (_b = (_a = idleCodes.find((code) => code.id !== user_state_types_1.AgentUserState.RONA && code.id !== user_state_types_1.AgentUserState.Engaged)) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : '0';\n }, [idleCodes]);\n let selectedKey;\n if (customState) {\n selectedKey = `hide-${customState.developerName}`;\n }\n else {\n selectedKey = currentState;\n }\n const items = customState\n ? [{ name: customState.name, id: `hide-${customState.developerName}`, developerName: customState.developerName }]\n : [];\n for (const item of idleCodes) {\n if (item.name === user_state_types_1.AgentUserState.RONA && item.id === currentState) {\n selectedKey = `hide-${item.id}`;\n }\n if (item.name === user_state_types_1.AgentUserState.RONA && item.id !== currentState) {\n continue; // Skip RONA unless it matches the current state\n }\n items.push(Object.assign(Object.assign({}, item), { id: item.name === user_state_types_1.AgentUserState.RONA ? `hide-${item.id}` : item.id }));\n }\n const getDropdownClass = () => {\n if (customState) {\n return 'custom'; // Custom state class\n }\n if (currentState === '0') {\n return '';\n }\n for (const item of idleCodes) {\n if (item.id === currentState && item.name === user_state_types_1.AgentUserState.RONA) {\n return 'rona';\n }\n }\n return 'idle';\n };\n const getIconStyle = (item) => {\n if (item.developerName) {\n return { class: 'custom', iconName: 'busy-presence-light' };\n }\n switch (item.id) {\n case '0':\n return { class: 'available', iconName: 'active-presence-small-filled' };\n case item.name === user_state_types_1.AgentUserState.RONA && item.id:\n return { class: 'rona', iconName: 'dnd-presence-filled' };\n default:\n return { class: 'idle', iconName: 'recents-presence-filled' };\n }\n };\n // Sorts the dropdown items by keeping 'Available' at the top and sorting the rest alphabetically by name\n const sortedItems = [\n ...items.filter((item) => item.name === user_state_types_1.AgentUserState.Available),\n ...items.filter((item) => item.name !== user_state_types_1.AgentUserState.Available).sort((a, b) => a.name.localeCompare(b.name)),\n ];\n return (react_1.default.createElement(\"div\", { className: \"user-state-container\" },\n react_1.default.createElement(react_collaboration_1.SelectNext, { label: \"\", \"aria-label\": \"user-state\", direction: \"bottom\", onSelectionChange: (key) => {\n const cleanKey = key.startsWith('hide-') ? key.substring(5) : key;\n setAgentStatus(cleanKey);\n }, showBorder: true, selectedKey: selectedKey, items: sortedItems, className: `state-select ${getDropdownClass()}` }, (item) => {\n var _a;\n const isRonaOrEngaged = [user_state_types_1.AgentUserState.RONA, user_state_types_1.AgentUserState.Engaged].includes(((_a = idleCodes.find((code) => code.id === currentState)) === null || _a === void 0 ? void 0 : _a.name) || '');\n const shouldHighlight = currentState === item.id || (isRonaOrEngaged && item.id === previousSelectableState);\n return (react_1.default.createElement(collections_1.Item, { key: item.id, textValue: item.name },\n react_1.default.createElement(\"div\", { className: `item-container ${shouldHighlight ? `selected ${getIconStyle(item).class}` : ''}` },\n react_1.default.createElement(react_2.Icon, { name: getIconStyle(item).iconName, title: \"\", className: `state-icon ${getIconStyle(item).class}` }),\n react_1.default.createElement(react_collaboration_1.Text, { className: `state-name ${getIconStyle(item).class}`, tagName: 'small' }, item.name))));\n }),\n !customState && (react_1.default.createElement(\"span\", { className: `elapsedTime ${isSettingAgentStatus ? 'elapsedTime-disabled' : ''}` },\n lastIdleStateChangeElapsedTime >= 0 ? (0, utils_1.formatTime)(lastIdleStateChangeElapsedTime) + ' / ' : '',\n (0, utils_1.formatTime)(elapsedTime))),\n react_1.default.createElement(react_2.Icon, { className: \"select-arrow-icon\", name: \"arrow-down-bold\", title: \"\" })));\n};\nexports[\"default\"] = UserStateComponent;\n\n\n//# sourceURL=webpack://@webex/cc-components/./src/components/UserState/user-state.tsx?");
|
|
3157
3157
|
|
|
3158
3158
|
/***/ }),
|
|
3159
3159
|
|
|
@@ -3164,7 +3164,7 @@ eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
3164
3164
|
/***/ ((__unused_webpack_module, exports) => {
|
|
3165
3165
|
|
|
3166
3166
|
"use strict";
|
|
3167
|
-
eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\n\n\n//# sourceURL=webpack://@webex/cc-components/./src/components/UserState/user-state.types.ts?");
|
|
3167
|
+
eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.AgentUserState = void 0;\nvar AgentUserState;\n(function (AgentUserState) {\n AgentUserState[\"Available\"] = \"Available\";\n AgentUserState[\"RONA\"] = \"RONA\";\n AgentUserState[\"Engaged\"] = \"ENGAGED\";\n})(AgentUserState || (exports.AgentUserState = AgentUserState = {}));\n\n\n//# sourceURL=webpack://@webex/cc-components/./src/components/UserState/user-state.types.ts?");
|
|
3168
3168
|
|
|
3169
3169
|
/***/ }),
|
|
3170
3170
|
|
|
@@ -3307,7 +3307,7 @@ eval("\nvar __createBinding = (this && this.__createBinding) || (Object.create ?
|
|
|
3307
3307
|
/***/ ((__unused_webpack_module, exports) => {
|
|
3308
3308
|
|
|
3309
3309
|
"use strict";
|
|
3310
|
-
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 return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds
|
|
3310
|
+
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?");
|
|
3311
3311
|
|
|
3312
3312
|
/***/ }),
|
|
3313
3313
|
|
package/dist/wc.js
CHANGED
|
@@ -2889,7 +2889,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
|
|
|
2889
2889
|
/***/ ((module, __webpack_exports__, __webpack_require__) => {
|
|
2890
2890
|
|
|
2891
2891
|
"use strict";
|
|
2892
|
-
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, `.user-state-container {\n position: relative;\n width: 100%; /* Ensure the select trigger takes the full width of its parent */\n display: flex;\n align-items: center;\n justify-content: space-between; /* Space out the elements within the select trigger */\n}\n\n.select-trigger .md-select {\n width: 100%; /* Ensure the SelectNext component takes the full width of its parent */\n}\n\n.elapsedTime {\n position: absolute;\n right: 2rem; /* Adjusted to leave space for the arrow icon */\n top: 50%;\n transform: translateY(-50%);\n display: flex;\n align-items: center;\n pointer-events: none;\n z-index: 1;\n color: var(--mds-color-theme-text-primary-normal);\n white-space: nowrap; /* Prevent the text from wrapping */\n padding: 0 0.5rem; /* Add some padding */\n border-radius: 0.25rem; /* Add some border radius */\n}\n\n.state-name {\n color: var(--mds-color-theme-text-primary-normal);\n}\n\n.elapsedTime-disabled {\n color: #ccc;\n}\n\n.item-container {\n display: flex;\n align-items: center;\n gap: 0.25rem;\n}\n\n.hide-this {\n display: none;\n}\n\n.state-icon {\n --mdc-icon-fill-color: var(--mds-color-theme-indicator-stable);\n}\n.state-icon.idle {\n --mdc-icon-fill-color: var(--mds-color-theme-indicator-locked);\n}\n.state-icon.rona {\n --mdc-icon-fill-color: var(--mds-color-theme-outline-cancel-normal);\n}\n.state-icon.custom {\n --mdc-icon-fill-color: var(--mds-color-theme-text-team-gold-hover);\n}\n\n.state-select {\n width: 100%;\n --mds-color-theme-background-primary-active: var(--mds-color-theme-background-alert-success-normal);\n}\n.state-select .md-select-dropdown-input {\n background-color: var(--mds-color-theme-background-alert-success-normal);\n}\n.state-select.idle {\n width: 100%;\n --mds-color-theme-background-primary-active: var(--mds-color-theme-background-primary-active);\n}\n.state-select.idle .md-select-dropdown-input {\n background-color: var(--mds-color-theme-background-secondary-normal);\n}\n.state-select.rona {\n width: 100%;\n --mds-color-theme-background-primary-active: var(--mds-color-theme-background-alert-error-active);\n}\n.state-select.rona .md-select-dropdown-input {\n background-color: var(--mds-color-theme-background-alert-error-normal);\n border: 1px solid var(--mds-color-theme-outline-cancel-normal);\n}\n.state-select.custom {\n width: 100%;\n --mds-color-theme-background-primary-active: var(--mds-color-theme-background-alert-warning-active);\n}\n.state-select.custom .md-select-dropdown-input {\n background-color: var(--mds-color-theme-background-alert-warning-normal);\n border: 1px solid var(--mds-color-theme-text-team-gold-hover);\n}\n.state-select .md-select-popover ul li[data-key^=hide-] {\n display: none;\n}\n\n.select-arrow-icon {\n position: absolute;\n right: 1rem; /* Adjusted to leave space for the arrow icon */\n top: 50%;\n transform: translateY(-50%);\n display: flex;\n align-items: center;\n pointer-events: none;\n z-index: 1;\n}`, \"\"]);\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://@webex/cc-components/./src/components/UserState/user-state.scss?../../../node_modules/css-loader/dist/cjs.js!../../../node_modules/sass-loader/dist/cjs.js");
|
|
2892
|
+
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, `.user-state-container {\n position: relative;\n width: 100%; /* Ensure the select trigger takes the full width of its parent */\n display: flex;\n align-items: center;\n justify-content: space-between; /* Space out the elements within the select trigger */\n}\n\n.select-trigger .md-select {\n width: 100%; /* Ensure the SelectNext component takes the full width of its parent */\n}\n\n.elapsedTime {\n position: absolute;\n right: 2rem; /* Adjusted to leave space for the arrow icon */\n top: 50%;\n transform: translateY(-50%);\n display: flex;\n align-items: center;\n pointer-events: none;\n z-index: 1;\n color: var(--mds-color-theme-text-primary-normal);\n white-space: nowrap; /* Prevent the text from wrapping */\n padding: 0 0.5rem; /* Add some padding */\n border-radius: 0.25rem; /* Add some border radius */\n}\n\n.state-name {\n color: var(--mds-color-theme-text-primary-normal);\n}\n.state-name.rona {\n color: var(--mds-color-theme-text-error-normal);\n}\n.state-name.custom {\n color: var(--mds-color-theme-text-warning-normal);\n}\n\n.elapsedTime-disabled {\n color: #ccc;\n}\n\n.item-container {\n display: flex;\n align-items: center;\n gap: 0.25rem;\n}\n\n.hide-this {\n display: none;\n}\n\n.state-icon {\n --mdc-icon-fill-color: var(--mds-color-theme-indicator-stable);\n}\n.state-icon.idle {\n --mdc-icon-fill-color: var(--mds-color-theme-indicator-locked);\n}\n.state-icon.rona {\n --mdc-icon-fill-color: var(--mds-color-theme-outline-cancel-normal);\n}\n.state-icon.custom {\n --mdc-icon-fill-color: var(--mds-color-theme-text-team-gold-hover);\n}\n\n.state-select {\n width: 100%;\n --mds-color-theme-background-primary-active: var(--mds-color-theme-background-alert-success-normal);\n}\n.state-select .md-select-dropdown-input {\n background-color: var(--mds-color-theme-background-alert-success-normal);\n}\n.state-select.idle {\n width: 100%;\n --mds-color-theme-background-primary-active: var(--mds-color-theme-background-primary-active);\n}\n.state-select.idle .md-select-dropdown-input {\n background-color: var(--mds-color-theme-background-secondary-normal);\n}\n.state-select.rona {\n width: 100%;\n --mds-color-theme-background-primary-active: var(--mds-color-theme-background-alert-error-active);\n}\n.state-select.rona .md-select-dropdown-input {\n background-color: var(--mds-color-theme-background-alert-error-normal);\n border: 1px solid var(--mds-color-theme-outline-cancel-normal);\n}\n.state-select.custom {\n width: 100%;\n --mds-color-theme-background-primary-active: var(--mds-color-theme-background-alert-warning-active);\n}\n.state-select.custom .md-select-dropdown-input {\n background-color: var(--mds-color-theme-background-alert-warning-normal);\n border: 1px solid var(--mds-color-theme-text-team-gold-hover);\n}\n.state-select.available {\n width: 100%;\n --mds-color-theme-background-primary-active: var(--mds-color-theme-background-alert-success-normal);\n}\n.state-select.available .md-select-dropdown-input {\n background-color: var(--mds-color-theme-background-alert-success-normal);\n border: 1px solid var(--mds-color-theme-outline-join-normal);\n}\n.state-select .md-select-popover ul li[data-key^=hide-] {\n display: none;\n}\n.state-select .item-container.selected.available .state-icon {\n --mdc-icon-fill-color: var(--mds-color-theme-outline-join-normal);\n}\n.state-select .item-container.selected.available .state-name {\n color: var(--mds-color-theme-outline-join-normal);\n}\n.state-select .item-container.selected.idle .state-icon {\n --mdc-icon-fill-color: var(--mds-color-theme-text-primary-normal);\n}\n.state-select .item-container.selected.idle .state-name {\n color: var(--mds-color-theme-text-primary-normal);\n}\n\n.select-arrow-icon {\n position: absolute;\n right: 1rem; /* Adjusted to leave space for the arrow icon */\n top: 50%;\n transform: translateY(-50%);\n display: flex;\n align-items: center;\n pointer-events: none;\n z-index: 1;\n}`, \"\"]);\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://@webex/cc-components/./src/components/UserState/user-state.scss?../../../node_modules/css-loader/dist/cjs.js!../../../node_modules/sass-loader/dist/cjs.js");
|
|
2893
2893
|
|
|
2894
2894
|
/***/ }),
|
|
2895
2895
|
|
|
@@ -3131,7 +3131,18 @@ eval("\nvar __createBinding = (this && this.__createBinding) || (Object.create ?
|
|
|
3131
3131
|
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
|
|
3132
3132
|
|
|
3133
3133
|
"use strict";
|
|
3134
|
-
eval("\nvar
|
|
3134
|
+
eval("\nvar __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n var desc = Object.getOwnPropertyDescriptor(m, k);\n if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\n desc = { enumerable: true, get: function() { return m[k]; } };\n }\n Object.defineProperty(o, k2, desc);\n}) : (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n o[k2] = m[k];\n}));\nvar __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {\n Object.defineProperty(o, \"default\", { enumerable: true, value: v });\n}) : function(o, v) {\n o[\"default\"] = v;\n});\nvar __importStar = (this && this.__importStar) || function (mod) {\n if (mod && mod.__esModule) return mod;\n var result = {};\n if (mod != null) for (var k in mod) if (k !== \"default\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);\n __setModuleDefault(result, mod);\n return result;\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst react_1 = __importStar(__webpack_require__(/*! react */ \"react\"));\nconst user_state_types_1 = __webpack_require__(/*! ./user-state.types */ \"./src/components/UserState/user-state.types.ts\");\nconst utils_1 = __webpack_require__(/*! ../../utils */ \"./src/utils/index.ts\");\n__webpack_require__(/*! ./user-state.scss */ \"./src/components/UserState/user-state.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 UserStateComponent = (props) => {\n const { idleCodes, setAgentStatus, isSettingAgentStatus, elapsedTime, lastIdleStateChangeElapsedTime, currentState, customState, } = props;\n const previousSelectableState = (0, react_1.useMemo)(() => {\n var _a, _b;\n return (_b = (_a = idleCodes.find((code) => code.id !== user_state_types_1.AgentUserState.RONA && code.id !== user_state_types_1.AgentUserState.Engaged)) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : '0';\n }, [idleCodes]);\n let selectedKey;\n if (customState) {\n selectedKey = `hide-${customState.developerName}`;\n }\n else {\n selectedKey = currentState;\n }\n const items = customState\n ? [{ name: customState.name, id: `hide-${customState.developerName}`, developerName: customState.developerName }]\n : [];\n for (const item of idleCodes) {\n if (item.name === user_state_types_1.AgentUserState.RONA && item.id === currentState) {\n selectedKey = `hide-${item.id}`;\n }\n if (item.name === user_state_types_1.AgentUserState.RONA && item.id !== currentState) {\n continue; // Skip RONA unless it matches the current state\n }\n items.push(Object.assign(Object.assign({}, item), { id: item.name === user_state_types_1.AgentUserState.RONA ? `hide-${item.id}` : item.id }));\n }\n const getDropdownClass = () => {\n if (customState) {\n return 'custom'; // Custom state class\n }\n if (currentState === '0') {\n return '';\n }\n for (const item of idleCodes) {\n if (item.id === currentState && item.name === user_state_types_1.AgentUserState.RONA) {\n return 'rona';\n }\n }\n return 'idle';\n };\n const getIconStyle = (item) => {\n if (item.developerName) {\n return { class: 'custom', iconName: 'busy-presence-light' };\n }\n switch (item.id) {\n case '0':\n return { class: 'available', iconName: 'active-presence-small-filled' };\n case item.name === user_state_types_1.AgentUserState.RONA && item.id:\n return { class: 'rona', iconName: 'dnd-presence-filled' };\n default:\n return { class: 'idle', iconName: 'recents-presence-filled' };\n }\n };\n // Sorts the dropdown items by keeping 'Available' at the top and sorting the rest alphabetically by name\n const sortedItems = [\n ...items.filter((item) => item.name === user_state_types_1.AgentUserState.Available),\n ...items.filter((item) => item.name !== user_state_types_1.AgentUserState.Available).sort((a, b) => a.name.localeCompare(b.name)),\n ];\n return (react_1.default.createElement(\"div\", { className: \"user-state-container\" },\n react_1.default.createElement(react_collaboration_1.SelectNext, { label: \"\", \"aria-label\": \"user-state\", direction: \"bottom\", onSelectionChange: (key) => {\n const cleanKey = key.startsWith('hide-') ? key.substring(5) : key;\n setAgentStatus(cleanKey);\n }, showBorder: true, selectedKey: selectedKey, items: sortedItems, className: `state-select ${getDropdownClass()}` }, (item) => {\n var _a;\n const isRonaOrEngaged = [user_state_types_1.AgentUserState.RONA, user_state_types_1.AgentUserState.Engaged].includes(((_a = idleCodes.find((code) => code.id === currentState)) === null || _a === void 0 ? void 0 : _a.name) || '');\n const shouldHighlight = currentState === item.id || (isRonaOrEngaged && item.id === previousSelectableState);\n return (react_1.default.createElement(collections_1.Item, { key: item.id, textValue: item.name },\n react_1.default.createElement(\"div\", { className: `item-container ${shouldHighlight ? `selected ${getIconStyle(item).class}` : ''}` },\n react_1.default.createElement(react_2.Icon, { name: getIconStyle(item).iconName, title: \"\", className: `state-icon ${getIconStyle(item).class}` }),\n react_1.default.createElement(react_collaboration_1.Text, { className: `state-name ${getIconStyle(item).class}`, tagName: 'small' }, item.name))));\n }),\n !customState && (react_1.default.createElement(\"span\", { className: `elapsedTime ${isSettingAgentStatus ? 'elapsedTime-disabled' : ''}` },\n lastIdleStateChangeElapsedTime >= 0 ? (0, utils_1.formatTime)(lastIdleStateChangeElapsedTime) + ' / ' : '',\n (0, utils_1.formatTime)(elapsedTime))),\n react_1.default.createElement(react_2.Icon, { className: \"select-arrow-icon\", name: \"arrow-down-bold\", title: \"\" })));\n};\nexports[\"default\"] = UserStateComponent;\n\n\n//# sourceURL=webpack://@webex/cc-components/./src/components/UserState/user-state.tsx?");
|
|
3135
|
+
|
|
3136
|
+
/***/ }),
|
|
3137
|
+
|
|
3138
|
+
/***/ "./src/components/UserState/user-state.types.ts":
|
|
3139
|
+
/*!******************************************************!*\
|
|
3140
|
+
!*** ./src/components/UserState/user-state.types.ts ***!
|
|
3141
|
+
\******************************************************/
|
|
3142
|
+
/***/ ((__unused_webpack_module, exports) => {
|
|
3143
|
+
|
|
3144
|
+
"use strict";
|
|
3145
|
+
eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.AgentUserState = void 0;\nvar AgentUserState;\n(function (AgentUserState) {\n AgentUserState[\"Available\"] = \"Available\";\n AgentUserState[\"RONA\"] = \"RONA\";\n AgentUserState[\"Engaged\"] = \"ENGAGED\";\n})(AgentUserState || (exports.AgentUserState = AgentUserState = {}));\n\n\n//# sourceURL=webpack://@webex/cc-components/./src/components/UserState/user-state.types.ts?");
|
|
3135
3146
|
|
|
3136
3147
|
/***/ }),
|
|
3137
3148
|
|
|
@@ -3230,7 +3241,7 @@ eval("\nvar __createBinding = (this && this.__createBinding) || (Object.create ?
|
|
|
3230
3241
|
/***/ ((__unused_webpack_module, exports) => {
|
|
3231
3242
|
|
|
3232
3243
|
"use strict";
|
|
3233
|
-
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 return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds
|
|
3244
|
+
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?");
|
|
3234
3245
|
|
|
3235
3246
|
/***/ }),
|
|
3236
3247
|
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@webex/cc-components",
|
|
3
3
|
"description": "Webex Contact Center UI Components Library for your custom contact center solutions",
|
|
4
|
-
"version": "1.28.0-ccwidgets.
|
|
4
|
+
"version": "1.28.0-ccwidgets.52",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"publishConfig": {
|
|
7
7
|
"access": "public"
|
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
},
|
|
26
26
|
"dependencies": {
|
|
27
27
|
"@r2wc/react-to-web-component": "2.0.3",
|
|
28
|
-
"@webex/cc-store": "1.28.0-ccwidgets.
|
|
28
|
+
"@webex/cc-store": "1.28.0-ccwidgets.52"
|
|
29
29
|
},
|
|
30
30
|
"devDependencies": {
|
|
31
31
|
"@babel/core": "7.25.2",
|