@webex/cc-components 1.28.0-ccwidgets.59 → 1.28.0-ccwidgets.61

package/dist/index.js

@@ -2889,7 +2889,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, `.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");
+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\n.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  max-width: 19rem;\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.tooltip-text {\n  text-align: center;\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");
 
 /***/ }),
 
@@ -3131,7 +3131,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexpo
 /***/ (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};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst react_1 = __importStar(__webpack_require__(/*! react */ \"react\"));\n__webpack_require__(/*! ./station-login.style.scss */ \"./src/components/StationLogin/station-login.style.scss\");\nconst constants_1 = __webpack_require__(/*! ./constants */ \"./src/components/StationLogin/constants.ts\");\nconst react_2 = __webpack_require__(/*! @momentum-design/components/dist/react */ \"../../../node_modules/@momentum-design/components/dist/react/index.js\");\nconst StationLoginComponent = (props) => {\n    var _a;\n    const { teams, loginOptions, login, logout, loginFailure, setDeviceType, setDialNumber, setTeam, isAgentLoggedIn, deviceType, dialNumber, dialNumberRegex, showMultipleLoginAlert, handleContinue, onCCSignOut, } = props;\n    const modalRef = (0, react_1.useRef)(null);\n    const ccSignOutModalRef = (0, react_1.useRef)(null);\n    const [dialNumberLabel, setDialNumberLabel] = (0, react_1.useState)('');\n    const [dialNumberPlaceholder, setDialNumberPlaceholder] = (0, react_1.useState)('');\n    const [dialNumberValue, setDialNumberValue] = (0, react_1.useState)(dialNumber || '');\n    const [showCCSignOutModal, setShowCCSignOutModal] = (0, react_1.useState)(false);\n    const [selectedDeviceType, setSelectedDeviceType] = (0, react_1.useState)(deviceType || '');\n    const [showDNError, setShowDNError] = (0, react_1.useState)(false);\n    const [dnErrorText, setDNErrorText] = (0, react_1.useState)('');\n    // useEffect to be called on mount\n    (0, react_1.useEffect)(() => {\n        setSelectedDeviceType(deviceType || '');\n        setDialNumberValue(dialNumber || '');\n        updateDialNumberLabel(deviceType || '');\n    }, [isAgentLoggedIn]);\n    // TODO: should be set from the store\n    (0, react_1.useEffect)(() => {\n        if (teams.length > 0) {\n            const firstTeam = teams[0].id;\n            setTeam(firstTeam);\n        }\n    }, [teams]);\n    // show modals\n    (0, react_1.useEffect)(() => {\n        var _a, _b;\n        if (showMultipleLoginAlert && modalRef.current) {\n            modalRef.current.showModal();\n        }\n        if (showCCSignOutModal && !((_a = ccSignOutModalRef === null || ccSignOutModalRef === void 0 ? void 0 : ccSignOutModalRef.current) === null || _a === void 0 ? void 0 : _a.open)) {\n            (_b = ccSignOutModalRef.current) === null || _b === void 0 ? void 0 : _b.showModal();\n        }\n    }, [showMultipleLoginAlert, showCCSignOutModal]);\n    const continueClicked = (0, react_1.useCallback)(() => {\n        if (modalRef.current) {\n            modalRef.current.close();\n            handleContinue();\n        }\n    }, [handleContinue]);\n    /**\n     * Handler for the Contact Center logout confirmation modal cancel button\n     *\n     * Closes the dialog if it is currently open\n     */\n    const ccCancelButtonClicked = (0, react_1.useCallback)(() => {\n        var _a;\n        if ((_a = ccSignOutModalRef === null || ccSignOutModalRef === void 0 ? void 0 : ccSignOutModalRef.current) === null || _a === void 0 ? void 0 : _a.open) {\n            ccSignOutModalRef.current.close();\n            setShowCCSignOutModal(false);\n        }\n    }, []);\n    const updateDialNumberLabel = (selectedOption) => {\n        if (selectedOption != constants_1.DESKTOP && Object.keys(constants_1.LoginOptions).includes(selectedOption)) {\n            setDialNumberLabel(constants_1.LoginOptions[selectedOption]);\n            setDialNumberPlaceholder(constants_1.LoginOptions[selectedOption]);\n        }\n    };\n    /**\n     * Runs validation tests on a string given as a Dial Number\n     * @param {string} input\n     * @returns {boolean} whether or not to show a validation error\n     */\n    const validateDialNumber = (input) => {\n        const regexForDn = new RegExp(dialNumberRegex !== null && dialNumberRegex !== void 0 ? dialNumberRegex : '1[0-9]{3}[2-9][0-9]{6}([,]{1,10}[0-9]+){0,1}');\n        if (regexForDn.test(input)) {\n            return false;\n        }\n        setDNErrorText(constants_1.StationLoginLabels.DN_FORMAT_ERROR);\n        return true;\n    };\n    return (react_1.default.createElement(react_1.default.Fragment, null,\n        react_1.default.createElement(\"dialog\", { ref: modalRef, className: \"modal\", open: showMultipleLoginAlert },\n            react_1.default.createElement(\"h2\", null, constants_1.StationLoginLabels.MULTIPLE_SIGN_IN_ALERT_TITLE),\n            react_1.default.createElement(\"p\", null, constants_1.StationLoginLabels.MULTIPLE_SIGN_IN_ALERT_MESSAGE),\n            react_1.default.createElement(\"div\", { className: \"modal-content\" },\n                react_1.default.createElement(\"button\", { id: \"ContinueButton\", \"data-testid\": \"ContinueButton\", onClick: continueClicked }, constants_1.StationLoginLabels.CONTINUE))),\n        react_1.default.createElement(\"dialog\", { ref: ccSignOutModalRef, className: \"cc-logout-modal\" },\n            react_1.default.createElement(react_2.Text, { tagname: \"h2\", type: \"body-large-bold\", className: \"modal-text\" }, constants_1.StationLoginLabels.CC_SIGN_OUT),\n            react_1.default.createElement(react_2.Text, { tagname: \"p\", type: \"body-midsize-regular\", className: \"modal-text\" }, constants_1.StationLoginLabels.CC_SIGN_OUT_CONFIRM),\n            react_1.default.createElement(\"div\", { className: \"cc-logout-modal-content\" },\n                react_1.default.createElement(react_2.Button, { onClick: ccCancelButtonClicked, variant: \"secondary\", className: \"white-button\" }, constants_1.StationLoginLabels.CANCEL),\n                react_1.default.createElement(react_2.Button, { onClick: onCCSignOut }, constants_1.StationLoginLabels.SIGN_OUT))),\n        react_1.default.createElement(\"div\", { className: \"box station-login\" },\n            react_1.default.createElement(\"section\", { className: \"section-box\" },\n                react_1.default.createElement(react_2.Text, { tagname: 'span', type: \"body-large-bold\" }, constants_1.StationLoginLabels.INTERACTION_PREFERENCES),\n                react_1.default.createElement(\"div\", null,\n                    react_1.default.createElement(\"div\", { id: \"agent-login-label\" },\n                        react_1.default.createElement(react_2.Text, { type: \"body-midsize-regular\" }, constants_1.StationLoginLabels.HANDLE_CALLS),\n                        react_1.default.createElement(react_2.Icon, { name: \"info-badge-filled\", id: \"agent-login-info-badge\" }),\n                        react_1.default.createElement(react_2.Tooltip, { color: \"contrast\", id: \"agent-login-label-tooltip\", showArrow: true, triggerID: \"agent-login-info-badge\" },\n                            react_1.default.createElement(react_2.Text, { tagname: 'div', type: \"body-large-regular\", className: \"agent-login-popover\" }, constants_1.StationLoginLabels.HANDLE_CALLS_TOOLTIP))),\n                    react_1.default.createElement(\"div\", null,\n                        react_1.default.createElement(react_2.Select, { id: \"login-option\", name: \"login-option\", onChange: (event) => {\n                                const selectedOption = event.detail.value;\n                                // TODO: Select component is calling onChange with first label on load\n                                // bug ticket: https://jira-eng-gpk2.cisco.com/jira/browse/MOMENTUM-668\n                                if (Object.keys(constants_1.LoginOptions).includes(selectedOption)) {\n                                    setDeviceType(selectedOption);\n                                    setSelectedDeviceType(selectedOption);\n                                    updateDialNumberLabel(selectedOption);\n                                    // clear dial number when switching between DN and Extension\n                                    setDialNumber('');\n                                    setShowDNError(false);\n                                }\n                            }, value: selectedDeviceType, className: \"station-login-select\", selectedValue: selectedDeviceType, selectedValueText: constants_1.LoginOptions[selectedDeviceType] }, Object.keys(constants_1.LoginOptions).map((option, index) => {\n                            // only show loginOptions provided by store\n                            if (loginOptions.includes(option)) {\n                                return (react_1.default.createElement(react_2.Option, { selected: option === selectedDeviceType, key: index, value: option }, constants_1.LoginOptions[option]));\n                            }\n                        })))),\n                selectedDeviceType && selectedDeviceType !== constants_1.DESKTOP && (react_1.default.createElement(react_2.Input, { label: dialNumberLabel, placeholder: dialNumberPlaceholder, value: dialNumberValue, onChange: (event) => {\n                        const input = event.target.value.trim();\n                        setDialNumberValue(input);\n                        setDialNumber(input);\n                        // validation\n                        if (input.length === 0) {\n                            // show error for empty string\n                            setDNErrorText(`${constants_1.LoginOptions[selectedDeviceType]} ${constants_1.StationLoginLabels.IS_REQUIRED}`);\n                            setShowDNError(true);\n                        }\n                        else if (selectedDeviceType === constants_1.DIALNUMBER) {\n                            setShowDNError(validateDialNumber(input));\n                        }\n                        else {\n                            setShowDNError(false);\n                        }\n                    }, helpText: showDNError ? dnErrorText : undefined, helpTextType: showDNError ? 'error' : undefined })),\n                react_1.default.createElement(\"div\", { className: \"select-container\" },\n                    react_1.default.createElement(react_2.Select, { label: constants_1.StationLoginLabels.YOUR_TEAM, id: \"teams-dropdown\", name: \"teams-dropdown\", onChange: (event) => {\n                            setTeam(event.detail.value);\n                        }, className: \"station-login-select\", placeholder: constants_1.StationLoginLabels.YOUR_TEAM }, teams.map((team, index) => {\n                        return (react_1.default.createElement(react_2.Option, { key: index, value: team.id }, team.name));\n                    }))),\n                loginFailure && (react_1.default.createElement(react_2.Text, { className: \"error-text-color\", type: 'body-midsize-regular' }, (_a = constants_1.SignInErrors[loginFailure.message]) !== null && _a !== void 0 ? _a : constants_1.StationLoginLabels.DEFAULT_ERROR)),\n                react_1.default.createElement(\"div\", { className: \"btn-container\" },\n                    isAgentLoggedIn ? (react_1.default.createElement(react_2.Button, { id: \"logoutAgent\", onClick: logout, color: \"positive\" }, constants_1.StationLoginLabels.SIGN_OUT)) : (react_1.default.createElement(react_2.Button, { onClick: login, disabled: showDNError }, constants_1.StationLoginLabels.SAVE_AND_CONTINUE)),\n                    onCCSignOut && (react_1.default.createElement(react_2.Button, { onClick: () => setShowCCSignOutModal(true), variant: \"secondary\", className: \"white-button\" }, constants_1.StationLoginLabels.SIGN_OUT)))))));\n};\nexports[\"default\"] = StationLoginComponent;\n\n\n//# sourceURL=webpack://@webex/cc-components/./src/components/StationLogin/station-login.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};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst react_1 = __importStar(__webpack_require__(/*! react */ \"react\"));\n__webpack_require__(/*! ./station-login.style.scss */ \"./src/components/StationLogin/station-login.style.scss\");\nconst constants_1 = __webpack_require__(/*! ./constants */ \"./src/components/StationLogin/constants.ts\");\nconst react_2 = __webpack_require__(/*! @momentum-design/components/dist/react */ \"../../../node_modules/@momentum-design/components/dist/react/index.js\");\nconst StationLoginComponent = (props) => {\n    var _a;\n    const { teams, loginOptions, login, logout, loginFailure, setDeviceType, setDialNumber, setTeam, isAgentLoggedIn, deviceType, dialNumber, dialNumberRegex, showMultipleLoginAlert, handleContinue, onCCSignOut, } = props;\n    const modalRef = (0, react_1.useRef)(null);\n    const ccSignOutModalRef = (0, react_1.useRef)(null);\n    const [dialNumberLabel, setDialNumberLabel] = (0, react_1.useState)('');\n    const [dialNumberPlaceholder, setDialNumberPlaceholder] = (0, react_1.useState)('');\n    const [dialNumberValue, setDialNumberValue] = (0, react_1.useState)(dialNumber || '');\n    const [showCCSignOutModal, setShowCCSignOutModal] = (0, react_1.useState)(false);\n    const [selectedDeviceType, setSelectedDeviceType] = (0, react_1.useState)(deviceType || '');\n    const [showDNError, setShowDNError] = (0, react_1.useState)(false);\n    const [dnErrorText, setDNErrorText] = (0, react_1.useState)('');\n    // useEffect to be called on mount\n    (0, react_1.useEffect)(() => {\n        setSelectedDeviceType(deviceType || '');\n        setDialNumberValue(dialNumber || '');\n        updateDialNumberLabel(deviceType || '');\n    }, [isAgentLoggedIn]);\n    // TODO: should be set from the store\n    (0, react_1.useEffect)(() => {\n        if (teams.length > 0) {\n            const firstTeam = teams[0].id;\n            setTeam(firstTeam);\n        }\n    }, [teams]);\n    // show modals\n    (0, react_1.useEffect)(() => {\n        var _a, _b;\n        if (showMultipleLoginAlert && modalRef.current) {\n            modalRef.current.showModal();\n        }\n        if (showCCSignOutModal && !((_a = ccSignOutModalRef === null || ccSignOutModalRef === void 0 ? void 0 : ccSignOutModalRef.current) === null || _a === void 0 ? void 0 : _a.open)) {\n            (_b = ccSignOutModalRef.current) === null || _b === void 0 ? void 0 : _b.showModal();\n        }\n    }, [showMultipleLoginAlert, showCCSignOutModal]);\n    const continueClicked = (0, react_1.useCallback)(() => {\n        if (modalRef.current) {\n            modalRef.current.close();\n            handleContinue();\n        }\n    }, [handleContinue]);\n    /**\n     * Handler for the Contact Center logout confirmation modal cancel button\n     *\n     * Closes the dialog if it is currently open\n     */\n    const ccCancelButtonClicked = (0, react_1.useCallback)(() => {\n        var _a;\n        if ((_a = ccSignOutModalRef === null || ccSignOutModalRef === void 0 ? void 0 : ccSignOutModalRef.current) === null || _a === void 0 ? void 0 : _a.open) {\n            ccSignOutModalRef.current.close();\n            setShowCCSignOutModal(false);\n        }\n    }, []);\n    const updateDialNumberLabel = (selectedOption) => {\n        if (selectedOption != constants_1.DESKTOP && Object.keys(constants_1.LoginOptions).includes(selectedOption)) {\n            setDialNumberLabel(constants_1.LoginOptions[selectedOption]);\n            setDialNumberPlaceholder(constants_1.LoginOptions[selectedOption]);\n        }\n    };\n    /**\n     * Runs validation tests on a string given as a Dial Number\n     * @param {string} input\n     * @returns {boolean} whether or not to show a validation error\n     */\n    const validateDialNumber = (input) => {\n        const regexForDn = new RegExp(dialNumberRegex !== null && dialNumberRegex !== void 0 ? dialNumberRegex : '1[0-9]{3}[2-9][0-9]{6}([,]{1,10}[0-9]+){0,1}');\n        if (regexForDn.test(input)) {\n            return false;\n        }\n        setDNErrorText(constants_1.StationLoginLabels.DN_FORMAT_ERROR);\n        return true;\n    };\n    return (react_1.default.createElement(react_1.default.Fragment, null,\n        react_1.default.createElement(\"dialog\", { ref: modalRef, className: \"modal\", open: showMultipleLoginAlert },\n            react_1.default.createElement(\"h2\", null, constants_1.StationLoginLabels.MULTIPLE_SIGN_IN_ALERT_TITLE),\n            react_1.default.createElement(\"p\", null, constants_1.StationLoginLabels.MULTIPLE_SIGN_IN_ALERT_MESSAGE),\n            react_1.default.createElement(\"div\", { className: \"modal-content\" },\n                react_1.default.createElement(\"button\", { id: \"ContinueButton\", \"data-testid\": \"ContinueButton\", onClick: continueClicked }, constants_1.StationLoginLabels.CONTINUE))),\n        react_1.default.createElement(\"dialog\", { ref: ccSignOutModalRef, className: \"cc-logout-modal\" },\n            react_1.default.createElement(react_2.Text, { tagname: \"h2\", type: \"body-large-bold\", className: \"modal-text\" }, constants_1.StationLoginLabels.CC_SIGN_OUT),\n            react_1.default.createElement(react_2.Text, { tagname: \"p\", type: \"body-midsize-regular\", className: \"modal-text\" }, constants_1.StationLoginLabels.CC_SIGN_OUT_CONFIRM),\n            react_1.default.createElement(\"div\", { className: \"cc-logout-modal-content\" },\n                react_1.default.createElement(react_2.Button, { onClick: ccCancelButtonClicked, variant: \"secondary\", className: \"white-button\" }, constants_1.StationLoginLabels.CANCEL),\n                react_1.default.createElement(react_2.Button, { onClick: onCCSignOut }, constants_1.StationLoginLabels.SIGN_OUT))),\n        react_1.default.createElement(\"div\", { className: \"box station-login\", \"data-testid\": \"station-login-widget\" },\n            react_1.default.createElement(\"section\", { className: \"section-box\" },\n                react_1.default.createElement(react_2.Text, { tagname: 'span', type: \"body-large-bold\" }, constants_1.StationLoginLabels.INTERACTION_PREFERENCES),\n                react_1.default.createElement(\"div\", null,\n                    react_1.default.createElement(\"div\", { id: \"agent-login-label\" },\n                        react_1.default.createElement(react_2.Text, { type: \"body-midsize-regular\" }, constants_1.StationLoginLabels.HANDLE_CALLS),\n                        react_1.default.createElement(react_2.Icon, { name: \"info-badge-filled\", id: \"agent-login-info-badge\" }),\n                        react_1.default.createElement(react_2.Tooltip, { color: \"contrast\", id: \"agent-login-label-tooltip\", showArrow: true, triggerID: \"agent-login-info-badge\" },\n                            react_1.default.createElement(react_2.Text, { tagname: 'div', type: \"body-large-regular\", className: \"agent-login-popover\" }, constants_1.StationLoginLabels.HANDLE_CALLS_TOOLTIP))),\n                    react_1.default.createElement(\"div\", null,\n                        react_1.default.createElement(react_2.Select, { id: \"login-option\", name: \"login-option\", onChange: (event) => {\n                                const selectedOption = event.detail.value;\n                                // TODO: Select component is calling onChange with first label on load\n                                // bug ticket: https://jira-eng-gpk2.cisco.com/jira/browse/MOMENTUM-668\n                                if (Object.keys(constants_1.LoginOptions).includes(selectedOption)) {\n                                    setDeviceType(selectedOption);\n                                    setSelectedDeviceType(selectedOption);\n                                    updateDialNumberLabel(selectedOption);\n                                    // clear dial number when switching between DN and Extension\n                                    setDialNumber('');\n                                    setShowDNError(false);\n                                }\n                            }, value: selectedDeviceType, className: \"station-login-select\", selectedValue: selectedDeviceType, selectedValueText: constants_1.LoginOptions[selectedDeviceType], \"data-testid\": \"login-option-select\" }, Object.keys(constants_1.LoginOptions).map((option, index) => {\n                            // only show loginOptions provided by store\n                            if (loginOptions.includes(option)) {\n                                return (react_1.default.createElement(react_2.Option, { selected: option === selectedDeviceType, key: index, value: option, \"data-testid\": `login-option-${constants_1.LoginOptions[option]}` }, constants_1.LoginOptions[option]));\n                            }\n                        })))),\n                selectedDeviceType && selectedDeviceType !== constants_1.DESKTOP && (react_1.default.createElement(react_2.Input, { label: dialNumberLabel, placeholder: dialNumberPlaceholder, value: dialNumberValue, onChange: (event) => {\n                        const input = event.target.value.trim();\n                        setDialNumberValue(input);\n                        setDialNumber(input);\n                        // validation\n                        if (input.length === 0) {\n                            // show error for empty string\n                            setDNErrorText(`${constants_1.LoginOptions[selectedDeviceType]} ${constants_1.StationLoginLabels.IS_REQUIRED}`);\n                            setShowDNError(true);\n                        }\n                        else if (selectedDeviceType === constants_1.DIALNUMBER) {\n                            setShowDNError(validateDialNumber(input));\n                        }\n                        else {\n                            setShowDNError(false);\n                        }\n                    }, helpText: showDNError ? dnErrorText : undefined, helpTextType: showDNError ? 'error' : undefined, \"data-testid\": \"dial-number-input\" })),\n                react_1.default.createElement(\"div\", { className: \"select-container\" },\n                    react_1.default.createElement(react_2.Select, { label: constants_1.StationLoginLabels.YOUR_TEAM, id: \"teams-dropdown\", name: \"teams-dropdown\", onChange: (event) => {\n                            setTeam(event.detail.value);\n                        }, className: \"station-login-select\", placeholder: constants_1.StationLoginLabels.YOUR_TEAM, \"data-testid\": \"teams-dropdown-select\" }, teams.map((team, index) => {\n                        return (react_1.default.createElement(react_2.Option, { key: index, value: team.id }, team.name));\n                    }))),\n                loginFailure && (react_1.default.createElement(react_2.Text, { className: \"error-text-color\", type: 'body-midsize-regular' }, (_a = constants_1.SignInErrors[loginFailure.message]) !== null && _a !== void 0 ? _a : constants_1.StationLoginLabels.DEFAULT_ERROR)),\n                react_1.default.createElement(\"div\", { className: \"btn-container\" },\n                    isAgentLoggedIn ? (react_1.default.createElement(react_2.Button, { id: \"logoutAgent\", onClick: logout, color: \"positive\", \"data-testid\": \"logout-button\" }, constants_1.StationLoginLabels.SIGN_OUT)) : (react_1.default.createElement(react_2.Button, { onClick: login, disabled: showDNError, \"data-testid\": \"login-button\" }, constants_1.StationLoginLabels.SAVE_AND_CONTINUE)),\n                    onCCSignOut && (react_1.default.createElement(react_2.Button, { onClick: () => setShowCCSignOutModal(true), variant: \"secondary\", className: \"white-button\" }, constants_1.StationLoginLabels.SIGN_OUT)))))));\n};\nexports[\"default\"] = StationLoginComponent;\n\n\n//# sourceURL=webpack://@webex/cc-components/./src/components/StationLogin/station-login.tsx?");
 
 /***/ }),
 
@@ -3146,6 +3146,17 @@ eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\n\n\n
 
 /***/ }),
 
+/***/ "./src/components/UserState/constant.ts":
+/*!**********************************************!*\
+  !*** ./src/components/UserState/constant.ts ***!
+  \**********************************************/
+/***/ ((__unused_webpack_module, exports) => {
+
+"use strict";
+eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.userStateLabels = void 0;\nexports.userStateLabels = {\n    availableTooltip: 'Availability State',\n    customWithAvailableTooltip: 'You are currently engaged in an interaction and in the Available state.',\n    customWithIdleStateTooltip: 'You are currently engaged in an interaction and in the idle state {{currentState}}.',\n};\n\n\n//# sourceURL=webpack://@webex/cc-components/./src/components/UserState/constant.ts?");
+
+/***/ }),
+
 /***/ "./src/components/UserState/user-state.tsx":
 /*!*************************************************!*\
   !*** ./src/components/UserState/user-state.tsx ***!
@@ -3153,7 +3164,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\n\n\n
 /***/ (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};\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?");
+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 constant_1 = __webpack_require__(/*! ./constant */ \"./src/components/UserState/constant.ts\");\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    const getTooltipText = () => {\n        if (customState && customState.developerName === 'ENGAGED') {\n            const currentStateObj = idleCodes.find((item) => item.id === currentState);\n            if (currentStateObj.name === user_state_types_1.AgentUserState.Available) {\n                return constant_1.userStateLabels.customWithAvailableTooltip;\n            }\n            else {\n                return constant_1.userStateLabels.customWithIdleStateTooltip.replace(/{{.*?}}/g, currentStateObj.name);\n            }\n        }\n        return constant_1.userStateLabels.availableTooltip;\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\", \"data-testid\": \"user-state-container\" },\n        react_1.default.createElement(react_collaboration_1.SelectNext, { id: \"user-state-tooltip\", 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()}`, \"data-testid\": \"state-select\" }, (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, \"data-testid\": `state-item-${item.name}` },\n                react_1.default.createElement(\"div\", { className: \"item-container\", \"data-testid\": `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}`, \"data-testid\": \"state-icon\" }),\n                    react_1.default.createElement(react_collaboration_1.Text, { className: `state-name ${getIconStyle(item).class}`, tagName: 'small', \"data-testid\": \"state-name\" }, item.name))));\n        }),\n        react_1.default.createElement(react_2.Tooltip, { placement: \"bottom\", color: \"contrast\", delay: \"0, 0\", className: \"tooltip\", triggerID: \"user-state-tooltip\" },\n            react_1.default.createElement(react_collaboration_1.Text, { tagName: \"small\", className: \"tooltip-text\" }, getTooltipText())),\n        !customState && (react_1.default.createElement(\"span\", { className: `elapsedTime ${isSettingAgentStatus ? 'elapsedTime-disabled' : ''}`, \"data-testid\": \"elapsed-time\" },\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: \"\", \"data-testid\": \"select-arrow-icon\" })));\n};\nexports[\"default\"] = UserStateComponent;\n\n\n//# sourceURL=webpack://@webex/cc-components/./src/components/UserState/user-state.tsx?");
 
 /***/ }),
 

package/dist/types/components/UserState/constant.d.ts

@@ -0,0 +1,5 @@
+export declare const userStateLabels: {
+    availableTooltip: string;
+    customWithAvailableTooltip: string;
+    customWithIdleStateTooltip: string;
+};

package/dist/wc.js

@@ -2889,7 +2889,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, `.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");
+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\n.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  max-width: 19rem;\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.tooltip-text {\n  text-align: center;\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");
 
 /***/ }),
 
@@ -3120,7 +3120,18 @@ eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexpo
 /***/ (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};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst react_1 = __importStar(__webpack_require__(/*! react */ \"react\"));\n__webpack_require__(/*! ./station-login.style.scss */ \"./src/components/StationLogin/station-login.style.scss\");\nconst constants_1 = __webpack_require__(/*! ./constants */ \"./src/components/StationLogin/constants.ts\");\nconst react_2 = __webpack_require__(/*! @momentum-design/components/dist/react */ \"../../../node_modules/@momentum-design/components/dist/react/index.js\");\nconst StationLoginComponent = (props) => {\n    var _a;\n    const { teams, loginOptions, login, logout, loginFailure, setDeviceType, setDialNumber, setTeam, isAgentLoggedIn, deviceType, dialNumber, dialNumberRegex, showMultipleLoginAlert, handleContinue, onCCSignOut, } = props;\n    const modalRef = (0, react_1.useRef)(null);\n    const ccSignOutModalRef = (0, react_1.useRef)(null);\n    const [dialNumberLabel, setDialNumberLabel] = (0, react_1.useState)('');\n    const [dialNumberPlaceholder, setDialNumberPlaceholder] = (0, react_1.useState)('');\n    const [dialNumberValue, setDialNumberValue] = (0, react_1.useState)(dialNumber || '');\n    const [showCCSignOutModal, setShowCCSignOutModal] = (0, react_1.useState)(false);\n    const [selectedDeviceType, setSelectedDeviceType] = (0, react_1.useState)(deviceType || '');\n    const [showDNError, setShowDNError] = (0, react_1.useState)(false);\n    const [dnErrorText, setDNErrorText] = (0, react_1.useState)('');\n    // useEffect to be called on mount\n    (0, react_1.useEffect)(() => {\n        setSelectedDeviceType(deviceType || '');\n        setDialNumberValue(dialNumber || '');\n        updateDialNumberLabel(deviceType || '');\n    }, [isAgentLoggedIn]);\n    // TODO: should be set from the store\n    (0, react_1.useEffect)(() => {\n        if (teams.length > 0) {\n            const firstTeam = teams[0].id;\n            setTeam(firstTeam);\n        }\n    }, [teams]);\n    // show modals\n    (0, react_1.useEffect)(() => {\n        var _a, _b;\n        if (showMultipleLoginAlert && modalRef.current) {\n            modalRef.current.showModal();\n        }\n        if (showCCSignOutModal && !((_a = ccSignOutModalRef === null || ccSignOutModalRef === void 0 ? void 0 : ccSignOutModalRef.current) === null || _a === void 0 ? void 0 : _a.open)) {\n            (_b = ccSignOutModalRef.current) === null || _b === void 0 ? void 0 : _b.showModal();\n        }\n    }, [showMultipleLoginAlert, showCCSignOutModal]);\n    const continueClicked = (0, react_1.useCallback)(() => {\n        if (modalRef.current) {\n            modalRef.current.close();\n            handleContinue();\n        }\n    }, [handleContinue]);\n    /**\n     * Handler for the Contact Center logout confirmation modal cancel button\n     *\n     * Closes the dialog if it is currently open\n     */\n    const ccCancelButtonClicked = (0, react_1.useCallback)(() => {\n        var _a;\n        if ((_a = ccSignOutModalRef === null || ccSignOutModalRef === void 0 ? void 0 : ccSignOutModalRef.current) === null || _a === void 0 ? void 0 : _a.open) {\n            ccSignOutModalRef.current.close();\n            setShowCCSignOutModal(false);\n        }\n    }, []);\n    const updateDialNumberLabel = (selectedOption) => {\n        if (selectedOption != constants_1.DESKTOP && Object.keys(constants_1.LoginOptions).includes(selectedOption)) {\n            setDialNumberLabel(constants_1.LoginOptions[selectedOption]);\n            setDialNumberPlaceholder(constants_1.LoginOptions[selectedOption]);\n        }\n    };\n    /**\n     * Runs validation tests on a string given as a Dial Number\n     * @param {string} input\n     * @returns {boolean} whether or not to show a validation error\n     */\n    const validateDialNumber = (input) => {\n        const regexForDn = new RegExp(dialNumberRegex !== null && dialNumberRegex !== void 0 ? dialNumberRegex : '1[0-9]{3}[2-9][0-9]{6}([,]{1,10}[0-9]+){0,1}');\n        if (regexForDn.test(input)) {\n            return false;\n        }\n        setDNErrorText(constants_1.StationLoginLabels.DN_FORMAT_ERROR);\n        return true;\n    };\n    return (react_1.default.createElement(react_1.default.Fragment, null,\n        react_1.default.createElement(\"dialog\", { ref: modalRef, className: \"modal\", open: showMultipleLoginAlert },\n            react_1.default.createElement(\"h2\", null, constants_1.StationLoginLabels.MULTIPLE_SIGN_IN_ALERT_TITLE),\n            react_1.default.createElement(\"p\", null, constants_1.StationLoginLabels.MULTIPLE_SIGN_IN_ALERT_MESSAGE),\n            react_1.default.createElement(\"div\", { className: \"modal-content\" },\n                react_1.default.createElement(\"button\", { id: \"ContinueButton\", \"data-testid\": \"ContinueButton\", onClick: continueClicked }, constants_1.StationLoginLabels.CONTINUE))),\n        react_1.default.createElement(\"dialog\", { ref: ccSignOutModalRef, className: \"cc-logout-modal\" },\n            react_1.default.createElement(react_2.Text, { tagname: \"h2\", type: \"body-large-bold\", className: \"modal-text\" }, constants_1.StationLoginLabels.CC_SIGN_OUT),\n            react_1.default.createElement(react_2.Text, { tagname: \"p\", type: \"body-midsize-regular\", className: \"modal-text\" }, constants_1.StationLoginLabels.CC_SIGN_OUT_CONFIRM),\n            react_1.default.createElement(\"div\", { className: \"cc-logout-modal-content\" },\n                react_1.default.createElement(react_2.Button, { onClick: ccCancelButtonClicked, variant: \"secondary\", className: \"white-button\" }, constants_1.StationLoginLabels.CANCEL),\n                react_1.default.createElement(react_2.Button, { onClick: onCCSignOut }, constants_1.StationLoginLabels.SIGN_OUT))),\n        react_1.default.createElement(\"div\", { className: \"box station-login\" },\n            react_1.default.createElement(\"section\", { className: \"section-box\" },\n                react_1.default.createElement(react_2.Text, { tagname: 'span', type: \"body-large-bold\" }, constants_1.StationLoginLabels.INTERACTION_PREFERENCES),\n                react_1.default.createElement(\"div\", null,\n                    react_1.default.createElement(\"div\", { id: \"agent-login-label\" },\n                        react_1.default.createElement(react_2.Text, { type: \"body-midsize-regular\" }, constants_1.StationLoginLabels.HANDLE_CALLS),\n                        react_1.default.createElement(react_2.Icon, { name: \"info-badge-filled\", id: \"agent-login-info-badge\" }),\n                        react_1.default.createElement(react_2.Tooltip, { color: \"contrast\", id: \"agent-login-label-tooltip\", showArrow: true, triggerID: \"agent-login-info-badge\" },\n                            react_1.default.createElement(react_2.Text, { tagname: 'div', type: \"body-large-regular\", className: \"agent-login-popover\" }, constants_1.StationLoginLabels.HANDLE_CALLS_TOOLTIP))),\n                    react_1.default.createElement(\"div\", null,\n                        react_1.default.createElement(react_2.Select, { id: \"login-option\", name: \"login-option\", onChange: (event) => {\n                                const selectedOption = event.detail.value;\n                                // TODO: Select component is calling onChange with first label on load\n                                // bug ticket: https://jira-eng-gpk2.cisco.com/jira/browse/MOMENTUM-668\n                                if (Object.keys(constants_1.LoginOptions).includes(selectedOption)) {\n                                    setDeviceType(selectedOption);\n                                    setSelectedDeviceType(selectedOption);\n                                    updateDialNumberLabel(selectedOption);\n                                    // clear dial number when switching between DN and Extension\n                                    setDialNumber('');\n                                    setShowDNError(false);\n                                }\n                            }, value: selectedDeviceType, className: \"station-login-select\", selectedValue: selectedDeviceType, selectedValueText: constants_1.LoginOptions[selectedDeviceType] }, Object.keys(constants_1.LoginOptions).map((option, index) => {\n                            // only show loginOptions provided by store\n                            if (loginOptions.includes(option)) {\n                                return (react_1.default.createElement(react_2.Option, { selected: option === selectedDeviceType, key: index, value: option }, constants_1.LoginOptions[option]));\n                            }\n                        })))),\n                selectedDeviceType && selectedDeviceType !== constants_1.DESKTOP && (react_1.default.createElement(react_2.Input, { label: dialNumberLabel, placeholder: dialNumberPlaceholder, value: dialNumberValue, onChange: (event) => {\n                        const input = event.target.value.trim();\n                        setDialNumberValue(input);\n                        setDialNumber(input);\n                        // validation\n                        if (input.length === 0) {\n                            // show error for empty string\n                            setDNErrorText(`${constants_1.LoginOptions[selectedDeviceType]} ${constants_1.StationLoginLabels.IS_REQUIRED}`);\n                            setShowDNError(true);\n                        }\n                        else if (selectedDeviceType === constants_1.DIALNUMBER) {\n                            setShowDNError(validateDialNumber(input));\n                        }\n                        else {\n                            setShowDNError(false);\n                        }\n                    }, helpText: showDNError ? dnErrorText : undefined, helpTextType: showDNError ? 'error' : undefined })),\n                react_1.default.createElement(\"div\", { className: \"select-container\" },\n                    react_1.default.createElement(react_2.Select, { label: constants_1.StationLoginLabels.YOUR_TEAM, id: \"teams-dropdown\", name: \"teams-dropdown\", onChange: (event) => {\n                            setTeam(event.detail.value);\n                        }, className: \"station-login-select\", placeholder: constants_1.StationLoginLabels.YOUR_TEAM }, teams.map((team, index) => {\n                        return (react_1.default.createElement(react_2.Option, { key: index, value: team.id }, team.name));\n                    }))),\n                loginFailure && (react_1.default.createElement(react_2.Text, { className: \"error-text-color\", type: 'body-midsize-regular' }, (_a = constants_1.SignInErrors[loginFailure.message]) !== null && _a !== void 0 ? _a : constants_1.StationLoginLabels.DEFAULT_ERROR)),\n                react_1.default.createElement(\"div\", { className: \"btn-container\" },\n                    isAgentLoggedIn ? (react_1.default.createElement(react_2.Button, { id: \"logoutAgent\", onClick: logout, color: \"positive\" }, constants_1.StationLoginLabels.SIGN_OUT)) : (react_1.default.createElement(react_2.Button, { onClick: login, disabled: showDNError }, constants_1.StationLoginLabels.SAVE_AND_CONTINUE)),\n                    onCCSignOut && (react_1.default.createElement(react_2.Button, { onClick: () => setShowCCSignOutModal(true), variant: \"secondary\", className: \"white-button\" }, constants_1.StationLoginLabels.SIGN_OUT)))))));\n};\nexports[\"default\"] = StationLoginComponent;\n\n\n//# sourceURL=webpack://@webex/cc-components/./src/components/StationLogin/station-login.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};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst react_1 = __importStar(__webpack_require__(/*! react */ \"react\"));\n__webpack_require__(/*! ./station-login.style.scss */ \"./src/components/StationLogin/station-login.style.scss\");\nconst constants_1 = __webpack_require__(/*! ./constants */ \"./src/components/StationLogin/constants.ts\");\nconst react_2 = __webpack_require__(/*! @momentum-design/components/dist/react */ \"../../../node_modules/@momentum-design/components/dist/react/index.js\");\nconst StationLoginComponent = (props) => {\n    var _a;\n    const { teams, loginOptions, login, logout, loginFailure, setDeviceType, setDialNumber, setTeam, isAgentLoggedIn, deviceType, dialNumber, dialNumberRegex, showMultipleLoginAlert, handleContinue, onCCSignOut, } = props;\n    const modalRef = (0, react_1.useRef)(null);\n    const ccSignOutModalRef = (0, react_1.useRef)(null);\n    const [dialNumberLabel, setDialNumberLabel] = (0, react_1.useState)('');\n    const [dialNumberPlaceholder, setDialNumberPlaceholder] = (0, react_1.useState)('');\n    const [dialNumberValue, setDialNumberValue] = (0, react_1.useState)(dialNumber || '');\n    const [showCCSignOutModal, setShowCCSignOutModal] = (0, react_1.useState)(false);\n    const [selectedDeviceType, setSelectedDeviceType] = (0, react_1.useState)(deviceType || '');\n    const [showDNError, setShowDNError] = (0, react_1.useState)(false);\n    const [dnErrorText, setDNErrorText] = (0, react_1.useState)('');\n    // useEffect to be called on mount\n    (0, react_1.useEffect)(() => {\n        setSelectedDeviceType(deviceType || '');\n        setDialNumberValue(dialNumber || '');\n        updateDialNumberLabel(deviceType || '');\n    }, [isAgentLoggedIn]);\n    // TODO: should be set from the store\n    (0, react_1.useEffect)(() => {\n        if (teams.length > 0) {\n            const firstTeam = teams[0].id;\n            setTeam(firstTeam);\n        }\n    }, [teams]);\n    // show modals\n    (0, react_1.useEffect)(() => {\n        var _a, _b;\n        if (showMultipleLoginAlert && modalRef.current) {\n            modalRef.current.showModal();\n        }\n        if (showCCSignOutModal && !((_a = ccSignOutModalRef === null || ccSignOutModalRef === void 0 ? void 0 : ccSignOutModalRef.current) === null || _a === void 0 ? void 0 : _a.open)) {\n            (_b = ccSignOutModalRef.current) === null || _b === void 0 ? void 0 : _b.showModal();\n        }\n    }, [showMultipleLoginAlert, showCCSignOutModal]);\n    const continueClicked = (0, react_1.useCallback)(() => {\n        if (modalRef.current) {\n            modalRef.current.close();\n            handleContinue();\n        }\n    }, [handleContinue]);\n    /**\n     * Handler for the Contact Center logout confirmation modal cancel button\n     *\n     * Closes the dialog if it is currently open\n     */\n    const ccCancelButtonClicked = (0, react_1.useCallback)(() => {\n        var _a;\n        if ((_a = ccSignOutModalRef === null || ccSignOutModalRef === void 0 ? void 0 : ccSignOutModalRef.current) === null || _a === void 0 ? void 0 : _a.open) {\n            ccSignOutModalRef.current.close();\n            setShowCCSignOutModal(false);\n        }\n    }, []);\n    const updateDialNumberLabel = (selectedOption) => {\n        if (selectedOption != constants_1.DESKTOP && Object.keys(constants_1.LoginOptions).includes(selectedOption)) {\n            setDialNumberLabel(constants_1.LoginOptions[selectedOption]);\n            setDialNumberPlaceholder(constants_1.LoginOptions[selectedOption]);\n        }\n    };\n    /**\n     * Runs validation tests on a string given as a Dial Number\n     * @param {string} input\n     * @returns {boolean} whether or not to show a validation error\n     */\n    const validateDialNumber = (input) => {\n        const regexForDn = new RegExp(dialNumberRegex !== null && dialNumberRegex !== void 0 ? dialNumberRegex : '1[0-9]{3}[2-9][0-9]{6}([,]{1,10}[0-9]+){0,1}');\n        if (regexForDn.test(input)) {\n            return false;\n        }\n        setDNErrorText(constants_1.StationLoginLabels.DN_FORMAT_ERROR);\n        return true;\n    };\n    return (react_1.default.createElement(react_1.default.Fragment, null,\n        react_1.default.createElement(\"dialog\", { ref: modalRef, className: \"modal\", open: showMultipleLoginAlert },\n            react_1.default.createElement(\"h2\", null, constants_1.StationLoginLabels.MULTIPLE_SIGN_IN_ALERT_TITLE),\n            react_1.default.createElement(\"p\", null, constants_1.StationLoginLabels.MULTIPLE_SIGN_IN_ALERT_MESSAGE),\n            react_1.default.createElement(\"div\", { className: \"modal-content\" },\n                react_1.default.createElement(\"button\", { id: \"ContinueButton\", \"data-testid\": \"ContinueButton\", onClick: continueClicked }, constants_1.StationLoginLabels.CONTINUE))),\n        react_1.default.createElement(\"dialog\", { ref: ccSignOutModalRef, className: \"cc-logout-modal\" },\n            react_1.default.createElement(react_2.Text, { tagname: \"h2\", type: \"body-large-bold\", className: \"modal-text\" }, constants_1.StationLoginLabels.CC_SIGN_OUT),\n            react_1.default.createElement(react_2.Text, { tagname: \"p\", type: \"body-midsize-regular\", className: \"modal-text\" }, constants_1.StationLoginLabels.CC_SIGN_OUT_CONFIRM),\n            react_1.default.createElement(\"div\", { className: \"cc-logout-modal-content\" },\n                react_1.default.createElement(react_2.Button, { onClick: ccCancelButtonClicked, variant: \"secondary\", className: \"white-button\" }, constants_1.StationLoginLabels.CANCEL),\n                react_1.default.createElement(react_2.Button, { onClick: onCCSignOut }, constants_1.StationLoginLabels.SIGN_OUT))),\n        react_1.default.createElement(\"div\", { className: \"box station-login\", \"data-testid\": \"station-login-widget\" },\n            react_1.default.createElement(\"section\", { className: \"section-box\" },\n                react_1.default.createElement(react_2.Text, { tagname: 'span', type: \"body-large-bold\" }, constants_1.StationLoginLabels.INTERACTION_PREFERENCES),\n                react_1.default.createElement(\"div\", null,\n                    react_1.default.createElement(\"div\", { id: \"agent-login-label\" },\n                        react_1.default.createElement(react_2.Text, { type: \"body-midsize-regular\" }, constants_1.StationLoginLabels.HANDLE_CALLS),\n                        react_1.default.createElement(react_2.Icon, { name: \"info-badge-filled\", id: \"agent-login-info-badge\" }),\n                        react_1.default.createElement(react_2.Tooltip, { color: \"contrast\", id: \"agent-login-label-tooltip\", showArrow: true, triggerID: \"agent-login-info-badge\" },\n                            react_1.default.createElement(react_2.Text, { tagname: 'div', type: \"body-large-regular\", className: \"agent-login-popover\" }, constants_1.StationLoginLabels.HANDLE_CALLS_TOOLTIP))),\n                    react_1.default.createElement(\"div\", null,\n                        react_1.default.createElement(react_2.Select, { id: \"login-option\", name: \"login-option\", onChange: (event) => {\n                                const selectedOption = event.detail.value;\n                                // TODO: Select component is calling onChange with first label on load\n                                // bug ticket: https://jira-eng-gpk2.cisco.com/jira/browse/MOMENTUM-668\n                                if (Object.keys(constants_1.LoginOptions).includes(selectedOption)) {\n                                    setDeviceType(selectedOption);\n                                    setSelectedDeviceType(selectedOption);\n                                    updateDialNumberLabel(selectedOption);\n                                    // clear dial number when switching between DN and Extension\n                                    setDialNumber('');\n                                    setShowDNError(false);\n                                }\n                            }, value: selectedDeviceType, className: \"station-login-select\", selectedValue: selectedDeviceType, selectedValueText: constants_1.LoginOptions[selectedDeviceType], \"data-testid\": \"login-option-select\" }, Object.keys(constants_1.LoginOptions).map((option, index) => {\n                            // only show loginOptions provided by store\n                            if (loginOptions.includes(option)) {\n                                return (react_1.default.createElement(react_2.Option, { selected: option === selectedDeviceType, key: index, value: option, \"data-testid\": `login-option-${constants_1.LoginOptions[option]}` }, constants_1.LoginOptions[option]));\n                            }\n                        })))),\n                selectedDeviceType && selectedDeviceType !== constants_1.DESKTOP && (react_1.default.createElement(react_2.Input, { label: dialNumberLabel, placeholder: dialNumberPlaceholder, value: dialNumberValue, onChange: (event) => {\n                        const input = event.target.value.trim();\n                        setDialNumberValue(input);\n                        setDialNumber(input);\n                        // validation\n                        if (input.length === 0) {\n                            // show error for empty string\n                            setDNErrorText(`${constants_1.LoginOptions[selectedDeviceType]} ${constants_1.StationLoginLabels.IS_REQUIRED}`);\n                            setShowDNError(true);\n                        }\n                        else if (selectedDeviceType === constants_1.DIALNUMBER) {\n                            setShowDNError(validateDialNumber(input));\n                        }\n                        else {\n                            setShowDNError(false);\n                        }\n                    }, helpText: showDNError ? dnErrorText : undefined, helpTextType: showDNError ? 'error' : undefined, \"data-testid\": \"dial-number-input\" })),\n                react_1.default.createElement(\"div\", { className: \"select-container\" },\n                    react_1.default.createElement(react_2.Select, { label: constants_1.StationLoginLabels.YOUR_TEAM, id: \"teams-dropdown\", name: \"teams-dropdown\", onChange: (event) => {\n                            setTeam(event.detail.value);\n                        }, className: \"station-login-select\", placeholder: constants_1.StationLoginLabels.YOUR_TEAM, \"data-testid\": \"teams-dropdown-select\" }, teams.map((team, index) => {\n                        return (react_1.default.createElement(react_2.Option, { key: index, value: team.id }, team.name));\n                    }))),\n                loginFailure && (react_1.default.createElement(react_2.Text, { className: \"error-text-color\", type: 'body-midsize-regular' }, (_a = constants_1.SignInErrors[loginFailure.message]) !== null && _a !== void 0 ? _a : constants_1.StationLoginLabels.DEFAULT_ERROR)),\n                react_1.default.createElement(\"div\", { className: \"btn-container\" },\n                    isAgentLoggedIn ? (react_1.default.createElement(react_2.Button, { id: \"logoutAgent\", onClick: logout, color: \"positive\", \"data-testid\": \"logout-button\" }, constants_1.StationLoginLabels.SIGN_OUT)) : (react_1.default.createElement(react_2.Button, { onClick: login, disabled: showDNError, \"data-testid\": \"login-button\" }, constants_1.StationLoginLabels.SAVE_AND_CONTINUE)),\n                    onCCSignOut && (react_1.default.createElement(react_2.Button, { onClick: () => setShowCCSignOutModal(true), variant: \"secondary\", className: \"white-button\" }, constants_1.StationLoginLabels.SIGN_OUT)))))));\n};\nexports[\"default\"] = StationLoginComponent;\n\n\n//# sourceURL=webpack://@webex/cc-components/./src/components/StationLogin/station-login.tsx?");
+
+/***/ }),
+
+/***/ "./src/components/UserState/constant.ts":
+/*!**********************************************!*\
+  !*** ./src/components/UserState/constant.ts ***!
+  \**********************************************/
+/***/ ((__unused_webpack_module, exports) => {
+
+"use strict";
+eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.userStateLabels = void 0;\nexports.userStateLabels = {\n    availableTooltip: 'Availability State',\n    customWithAvailableTooltip: 'You are currently engaged in an interaction and in the Available state.',\n    customWithIdleStateTooltip: 'You are currently engaged in an interaction and in the idle state {{currentState}}.',\n};\n\n\n//# sourceURL=webpack://@webex/cc-components/./src/components/UserState/constant.ts?");
 
 /***/ }),
 
@@ -3131,7 +3142,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};\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?");
+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 constant_1 = __webpack_require__(/*! ./constant */ \"./src/components/UserState/constant.ts\");\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    const getTooltipText = () => {\n        if (customState && customState.developerName === 'ENGAGED') {\n            const currentStateObj = idleCodes.find((item) => item.id === currentState);\n            if (currentStateObj.name === user_state_types_1.AgentUserState.Available) {\n                return constant_1.userStateLabels.customWithAvailableTooltip;\n            }\n            else {\n                return constant_1.userStateLabels.customWithIdleStateTooltip.replace(/{{.*?}}/g, currentStateObj.name);\n            }\n        }\n        return constant_1.userStateLabels.availableTooltip;\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\", \"data-testid\": \"user-state-container\" },\n        react_1.default.createElement(react_collaboration_1.SelectNext, { id: \"user-state-tooltip\", 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()}`, \"data-testid\": \"state-select\" }, (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, \"data-testid\": `state-item-${item.name}` },\n                react_1.default.createElement(\"div\", { className: \"item-container\", \"data-testid\": `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}`, \"data-testid\": \"state-icon\" }),\n                    react_1.default.createElement(react_collaboration_1.Text, { className: `state-name ${getIconStyle(item).class}`, tagName: 'small', \"data-testid\": \"state-name\" }, item.name))));\n        }),\n        react_1.default.createElement(react_2.Tooltip, { placement: \"bottom\", color: \"contrast\", delay: \"0, 0\", className: \"tooltip\", triggerID: \"user-state-tooltip\" },\n            react_1.default.createElement(react_collaboration_1.Text, { tagName: \"small\", className: \"tooltip-text\" }, getTooltipText())),\n        !customState && (react_1.default.createElement(\"span\", { className: `elapsedTime ${isSettingAgentStatus ? 'elapsedTime-disabled' : ''}`, \"data-testid\": \"elapsed-time\" },\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: \"\", \"data-testid\": \"select-arrow-icon\" })));\n};\nexports[\"default\"] = UserStateComponent;\n\n\n//# sourceURL=webpack://@webex/cc-components/./src/components/UserState/user-state.tsx?");
 
 /***/ }),
 

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.59",
+  "version": "1.28.0-ccwidgets.61",
   "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.59"
+    "@webex/cc-store": "1.28.0-ccwidgets.61"
   },
   "devDependencies": {
     "@babel/core": "7.25.2",