@webex/cc-components 1.28.0-ccwidgets.35 → 1.28.0-ccwidgets.36

package/dist/index.js

@@ -1706,6 +1706,17 @@ eval("var $51588fd411aace25$exports = __webpack_require__(/*! ./CollectionBuilde
 
 /***/ }),
 
+/***/ "../../../node_modules/css-loader/dist/cjs.js!../../../node_modules/sass-loader/dist/cjs.js!./src/components/OutdialCall/out-dial-call.styles.scss":
+/*!*********************************************************************************************************************************************************!*\
+  !*** ../../../node_modules/css-loader/dist/cjs.js!../../../node_modules/sass-loader/dist/cjs.js!./src/components/OutdialCall/out-dial-call.styles.scss ***!
+  \*********************************************************************************************************************************************************/
+/***/ ((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, `.out-dial-call-box {\n  position: relative;\n  width: 100%;\n  background-color: var(--mds-color-theme-background-primary-normal);\n  border-radius: 0.5rem;\n  box-shadow: var(--mds-shadow-2);\n  padding: 1.25rem;\n  max-width: 50rem;\n}\n\n.out-dial-call-section-box {\n  padding: 0.625rem;\n}\n\n.out-dial-call-fieldset {\n  border: 1px solid var(--mds-color-theme-outline-secondary-normal);\n  border-radius: 0.325rem;\n  padding: 0.625rem;\n  margin-bottom: 1.25rem;\n}\n\n.out-dial-call-legend-box {\n  font-weight: bold;\n  color: var(--mds-color-theme-text-primary-normal);\n}\n\n.keypad {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  background: var(--mds-color-theme-background-secondary-normal);\n  padding: 1.25rem;\n  border-radius: 0.625rem;\n  width: 15.625rem;\n}\n.keypad input {\n  width: 100%;\n  padding: 0.625rem;\n  text-align: center;\n  font-size: 1.125rem;\n  margin-bottom: 0.625rem;\n  background: var(--mds-color-theme-background-primary-normal);\n  border: 1px solid var(--mds-color-theme-outline-secondary-normal);\n  border-radius: 0.25rem;\n  color: var(--mds-color-theme-text-primary-normal);\n}\n.keypad .keys {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 0.625rem;\n}\n.keypad .key {\n  width: 3.75rem;\n  height: 3.75rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--mds-color-theme-background-primary-normal);\n  color: var(--mds-color-theme-text-primary-normal);\n  font-size: 1.25rem;\n  border-radius: 50%;\n  cursor: pointer;\n  transition: background-color 0.2s ease;\n}\n.keypad .key:hover {\n  background: var(--mds-color-theme-background-primary-hover);\n}\n.keypad .key:active {\n  background: var(--mds-color-theme-background-primary-active);\n}\n\n.out-dial-call-btn {\n  margin-top: 0.625rem;\n  background: var(--mds-color-theme-background-alert-success-normal);\n  color: var(--mds-color-theme-text-primary-normal);\n  padding: 0.625rem 1.25rem;\n  border-radius: 50%;\n  cursor: pointer;\n  transition: background-color 0.2s ease;\n}\n.out-dial-call-btn:hover {\n  background: var(--mds-color-theme-background-alert-success-hover);\n}\n.out-dial-call-btn:active {\n  background: var(--mds-color-theme-background-alert-success-active);\n}`, \"\"]);\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://@webex/cc-components/./src/components/OutdialCall/out-dial-call.styles.scss?../../../node_modules/css-loader/dist/cjs.js!../../../node_modules/sass-loader/dist/cjs.js");
+
+/***/ }),
+
 /***/ "../../../node_modules/css-loader/dist/cjs.js!../../../node_modules/sass-loader/dist/cjs.js!./src/components/UserState/user-state.scss":
 /*!*********************************************************************************************************************************************!*\
   !*** ../../../node_modules/css-loader/dist/cjs.js!../../../node_modules/sass-loader/dist/cjs.js!./src/components/UserState/user-state.scss ***!
@@ -1739,6 +1750,17 @@ eval("\n\nmodule.exports = function (i) {\n  return i[1];\n};\n\n//# sourceURL=w
 
 /***/ }),
 
+/***/ "./src/components/OutdialCall/out-dial-call.styles.scss":
+/*!**************************************************************!*\
+  !*** ./src/components/OutdialCall/out-dial-call.styles.scss ***!
+  \**************************************************************/
+/***/ ((__unused_webpack_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_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! !../../../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js */ \"../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! !../../../../../../node_modules/style-loader/dist/runtime/styleDomAPI.js */ \"../../../node_modules/style-loader/dist/runtime/styleDomAPI.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! !../../../../../../node_modules/style-loader/dist/runtime/insertBySelector.js */ \"../../../node_modules/style-loader/dist/runtime/insertBySelector.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var _node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! !../../../../../../node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js */ \"../../../node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3__);\n/* harmony import */ var _node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! !../../../../../../node_modules/style-loader/dist/runtime/insertStyleElement.js */ \"../../../node_modules/style-loader/dist/runtime/insertStyleElement.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4__);\n/* harmony import */ var _node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! !../../../../../../node_modules/style-loader/dist/runtime/styleTagTransform.js */ \"../../../node_modules/style-loader/dist/runtime/styleTagTransform.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5__);\n/* harmony import */ var _node_modules_css_loader_dist_cjs_js_node_modules_sass_loader_dist_cjs_js_out_dial_call_styles_scss__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! !!../../../../../../node_modules/css-loader/dist/cjs.js!../../../../../../node_modules/sass-loader/dist/cjs.js!./out-dial-call.styles.scss */ \"../../../node_modules/css-loader/dist/cjs.js!../../../node_modules/sass-loader/dist/cjs.js!./src/components/OutdialCall/out-dial-call.styles.scss\");\n\n      \n      \n      \n      \n      \n      \n      \n      \n      \n\nvar options = {};\n\noptions.styleTagTransform = (_node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5___default());\noptions.setAttributes = (_node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3___default());\noptions.insert = _node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2___default().bind(null, \"head\");\noptions.domAPI = (_node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1___default());\noptions.insertStyleElement = (_node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4___default());\n\nvar update = _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0___default()(_node_modules_css_loader_dist_cjs_js_node_modules_sass_loader_dist_cjs_js_out_dial_call_styles_scss__WEBPACK_IMPORTED_MODULE_6__[\"default\"], options);\n\n\n\n\n       /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (_node_modules_css_loader_dist_cjs_js_node_modules_sass_loader_dist_cjs_js_out_dial_call_styles_scss__WEBPACK_IMPORTED_MODULE_6__[\"default\"] && _node_modules_css_loader_dist_cjs_js_node_modules_sass_loader_dist_cjs_js_out_dial_call_styles_scss__WEBPACK_IMPORTED_MODULE_6__[\"default\"].locals ? _node_modules_css_loader_dist_cjs_js_node_modules_sass_loader_dist_cjs_js_out_dial_call_styles_scss__WEBPACK_IMPORTED_MODULE_6__[\"default\"].locals : undefined);\n\n\n//# sourceURL=webpack://@webex/cc-components/./src/components/OutdialCall/out-dial-call.styles.scss?");
+
+/***/ }),
+
 /***/ "./src/components/UserState/user-state.scss":
 /*!**************************************************!*\
   !*** ./src/components/UserState/user-state.scss ***!
@@ -1816,6 +1838,17 @@ eval("\n\n/* istanbul ignore next  */\nfunction styleTagTransform(css, styleElem
 
 /***/ }),
 
+/***/ "./src/components/OutdialCall/out-dial-call.tsx":
+/*!******************************************************!*\
+  !*** ./src/components/OutdialCall/out-dial-call.tsx ***!
+  \******************************************************/
+/***/ (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__(/*! ./out-dial-call.styles.scss */ \"./src/components/OutdialCall/out-dial-call.styles.scss\");\nconst OutdialCallComponent = (props) => {\n    const { startOutdial } = props;\n    const [destination, setDestination] = (0, react_1.useState)('');\n    const updateOutboundNumber = (e) => {\n        var _a;\n        // Allow only valid input that is digits, #, *, and +\n        const VALID_KEYPAD_CHARS = /[\\d#*+]/g;\n        const filteredValue = ((_a = e.target.value.match(VALID_KEYPAD_CHARS)) === null || _a === void 0 ? void 0 : _a.join('')) || '';\n        setDestination(filteredValue);\n    };\n    // Function to press a key on the outdial keypad.\n    const handelKeyPress = (value) => {\n        setDestination((prev) => prev + value);\n    };\n    return (react_1.default.createElement(\"div\", { className: \"out-dial-call-box\" },\n        react_1.default.createElement(\"section\", { className: \"out-dial-call-section-box\" },\n            react_1.default.createElement(\"fieldset\", { className: \"out-dial-call-fieldset\" },\n                react_1.default.createElement(\"legend\", { className: \"out-dial-call-legend-box\" }, \"Outdial Call\"),\n                react_1.default.createElement(\"div\", { className: \"keypad\" },\n                    react_1.default.createElement(\"input\", { onChange: updateOutboundNumber, id: \"outBoundDialNumber\", placeholder: \"Enter number to dial\", value: destination }),\n                    react_1.default.createElement(\"div\", { className: \"keys\" }, ['1', '2', '3', '4', '5', '6', '7', '8', '9', '*', '0', '#'].map((key) => (react_1.default.createElement(\"div\", { key: key, className: \"key\", onClick: () => handelKeyPress(key) }, key)))),\n                    react_1.default.createElement(\"button\", { className: \"out-dial-call-btn\", onClick: () => startOutdial(destination) },\n                        react_1.default.createElement(\"svg\", { xmlns: \"http://www.w3.org/2000/svg\", height: \"24\", viewBox: \"0 0 24 24\", width: \"24\" },\n                            react_1.default.createElement(\"path\", { d: \"M6.62 10.79a15.053 15.053 0 006.59 6.59l2.2-2.2a1 1 0 011.11-.27c1.12.45 2.33.69 3.58.69a1 1 0 011 1v3.5a1 1 0 01-1 1C10.29 21 3 13.71 3 4.5a1 1 0 011-1h3.5a1 1 0 011 1c0 1.25.24 2.46.69 3.58a1 1 0 01-.27 1.11l-2.2 2.2z\" }))))))));\n};\nexports[\"default\"] = OutdialCallComponent;\n\n\n//# sourceURL=webpack://@webex/cc-components/./src/components/OutdialCall/out-dial-call.tsx?");
+
+/***/ }),
+
 /***/ "./src/components/UserState/user-state.tsx":
 /*!*************************************************!*\
   !*** ./src/components/UserState/user-state.tsx ***!
@@ -1834,7 +1867,7 @@ eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.UserStateComponent = void 0;\nconst user_state_1 = __importDefault(__webpack_require__(/*! ./components/UserState/user-state */ \"./src/components/UserState/user-state.tsx\"));\nexports.UserStateComponent = user_state_1.default;\n\n\n//# sourceURL=webpack://@webex/cc-components/./src/index.ts?");
+eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.OutdialCallComponent = exports.UserStateComponent = void 0;\nconst user_state_1 = __importDefault(__webpack_require__(/*! ./components/UserState/user-state */ \"./src/components/UserState/user-state.tsx\"));\nexports.UserStateComponent = user_state_1.default;\nconst out_dial_call_1 = __importDefault(__webpack_require__(/*! ./components/OutdialCall/out-dial-call */ \"./src/components/OutdialCall/out-dial-call.tsx\"));\nexports.OutdialCallComponent = out_dial_call_1.default;\n\n\n//# sourceURL=webpack://@webex/cc-components/./src/index.ts?");
 
 /***/ }),
 

package/dist/types/components/OutdialCall/out-dial-call.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { OutdialCallComponentProps } from './out-dial-call.types';
+import './out-dial-call.styles.scss';
+declare const OutdialCallComponent: React.FunctionComponent<OutdialCallComponentProps>;
+export default OutdialCallComponent;

package/dist/types/components/OutdialCall/out-dial-call.types.d.ts

@@ -0,0 +1,17 @@
+import { ILogger, IContactCenter } from '@webex/cc-store';
+export interface IOutdialCall {
+    /**
+     * Function to start outdial call.
+     */
+    startOutdial: (destination: string) => void;
+    /**
+     * CC SDK Instance.
+     */
+    cc: IContactCenter;
+    /**
+     * Logger instance for logging purpose.
+     */
+    logger: ILogger;
+}
+export type OutdialCallComponentProps = Pick<IOutdialCall, 'startOutdial'>;
+export type useOutdialCallProps = Pick<IOutdialCall, 'cc' | 'logger'>;

package/dist/types/index.d.ts

@@ -1,3 +1,5 @@
 import UserStateComponent from './components/UserState/user-state';
 import { IUserState } from './components/UserState/user-state.types';
-export { UserStateComponent, type IUserState };
+import OutdialCallComponent from './components/OutdialCall/out-dial-call';
+import { IOutdialCall } from './components/OutdialCall/out-dial-call.types';
+export { UserStateComponent, type IUserState, OutdialCallComponent, type IOutdialCall };

package/dist/wc.js

@@ -1706,6 +1706,17 @@ eval("var $51588fd411aace25$exports = __webpack_require__(/*! ./CollectionBuilde
 
 /***/ }),
 
+/***/ "../../../node_modules/css-loader/dist/cjs.js!../../../node_modules/sass-loader/dist/cjs.js!./src/components/OutdialCall/out-dial-call.styles.scss":
+/*!*********************************************************************************************************************************************************!*\
+  !*** ../../../node_modules/css-loader/dist/cjs.js!../../../node_modules/sass-loader/dist/cjs.js!./src/components/OutdialCall/out-dial-call.styles.scss ***!
+  \*********************************************************************************************************************************************************/
+/***/ ((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, `.out-dial-call-box {\n  position: relative;\n  width: 100%;\n  background-color: var(--mds-color-theme-background-primary-normal);\n  border-radius: 0.5rem;\n  box-shadow: var(--mds-shadow-2);\n  padding: 1.25rem;\n  max-width: 50rem;\n}\n\n.out-dial-call-section-box {\n  padding: 0.625rem;\n}\n\n.out-dial-call-fieldset {\n  border: 1px solid var(--mds-color-theme-outline-secondary-normal);\n  border-radius: 0.325rem;\n  padding: 0.625rem;\n  margin-bottom: 1.25rem;\n}\n\n.out-dial-call-legend-box {\n  font-weight: bold;\n  color: var(--mds-color-theme-text-primary-normal);\n}\n\n.keypad {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  background: var(--mds-color-theme-background-secondary-normal);\n  padding: 1.25rem;\n  border-radius: 0.625rem;\n  width: 15.625rem;\n}\n.keypad input {\n  width: 100%;\n  padding: 0.625rem;\n  text-align: center;\n  font-size: 1.125rem;\n  margin-bottom: 0.625rem;\n  background: var(--mds-color-theme-background-primary-normal);\n  border: 1px solid var(--mds-color-theme-outline-secondary-normal);\n  border-radius: 0.25rem;\n  color: var(--mds-color-theme-text-primary-normal);\n}\n.keypad .keys {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 0.625rem;\n}\n.keypad .key {\n  width: 3.75rem;\n  height: 3.75rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--mds-color-theme-background-primary-normal);\n  color: var(--mds-color-theme-text-primary-normal);\n  font-size: 1.25rem;\n  border-radius: 50%;\n  cursor: pointer;\n  transition: background-color 0.2s ease;\n}\n.keypad .key:hover {\n  background: var(--mds-color-theme-background-primary-hover);\n}\n.keypad .key:active {\n  background: var(--mds-color-theme-background-primary-active);\n}\n\n.out-dial-call-btn {\n  margin-top: 0.625rem;\n  background: var(--mds-color-theme-background-alert-success-normal);\n  color: var(--mds-color-theme-text-primary-normal);\n  padding: 0.625rem 1.25rem;\n  border-radius: 50%;\n  cursor: pointer;\n  transition: background-color 0.2s ease;\n}\n.out-dial-call-btn:hover {\n  background: var(--mds-color-theme-background-alert-success-hover);\n}\n.out-dial-call-btn:active {\n  background: var(--mds-color-theme-background-alert-success-active);\n}`, \"\"]);\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://@webex/cc-components/./src/components/OutdialCall/out-dial-call.styles.scss?../../../node_modules/css-loader/dist/cjs.js!../../../node_modules/sass-loader/dist/cjs.js");
+
+/***/ }),
+
 /***/ "../../../node_modules/css-loader/dist/cjs.js!../../../node_modules/sass-loader/dist/cjs.js!./src/components/UserState/user-state.scss":
 /*!*********************************************************************************************************************************************!*\
   !*** ../../../node_modules/css-loader/dist/cjs.js!../../../node_modules/sass-loader/dist/cjs.js!./src/components/UserState/user-state.scss ***!
@@ -1750,6 +1761,17 @@ eval("\n\nvar m = __webpack_require__(/*! react-dom */ \"react-dom\");\nif (fals
 
 /***/ }),
 
+/***/ "./src/components/OutdialCall/out-dial-call.styles.scss":
+/*!**************************************************************!*\
+  !*** ./src/components/OutdialCall/out-dial-call.styles.scss ***!
+  \**************************************************************/
+/***/ ((__unused_webpack_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_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! !../../../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js */ \"../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! !../../../../../../node_modules/style-loader/dist/runtime/styleDomAPI.js */ \"../../../node_modules/style-loader/dist/runtime/styleDomAPI.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! !../../../../../../node_modules/style-loader/dist/runtime/insertBySelector.js */ \"../../../node_modules/style-loader/dist/runtime/insertBySelector.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var _node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! !../../../../../../node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js */ \"../../../node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3__);\n/* harmony import */ var _node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! !../../../../../../node_modules/style-loader/dist/runtime/insertStyleElement.js */ \"../../../node_modules/style-loader/dist/runtime/insertStyleElement.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4__);\n/* harmony import */ var _node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! !../../../../../../node_modules/style-loader/dist/runtime/styleTagTransform.js */ \"../../../node_modules/style-loader/dist/runtime/styleTagTransform.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5__);\n/* harmony import */ var _node_modules_css_loader_dist_cjs_js_node_modules_sass_loader_dist_cjs_js_out_dial_call_styles_scss__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! !!../../../../../../node_modules/css-loader/dist/cjs.js!../../../../../../node_modules/sass-loader/dist/cjs.js!./out-dial-call.styles.scss */ \"../../../node_modules/css-loader/dist/cjs.js!../../../node_modules/sass-loader/dist/cjs.js!./src/components/OutdialCall/out-dial-call.styles.scss\");\n\n      \n      \n      \n      \n      \n      \n      \n      \n      \n\nvar options = {};\n\noptions.styleTagTransform = (_node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5___default());\noptions.setAttributes = (_node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3___default());\noptions.insert = _node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2___default().bind(null, \"head\");\noptions.domAPI = (_node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1___default());\noptions.insertStyleElement = (_node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4___default());\n\nvar update = _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0___default()(_node_modules_css_loader_dist_cjs_js_node_modules_sass_loader_dist_cjs_js_out_dial_call_styles_scss__WEBPACK_IMPORTED_MODULE_6__[\"default\"], options);\n\n\n\n\n       /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (_node_modules_css_loader_dist_cjs_js_node_modules_sass_loader_dist_cjs_js_out_dial_call_styles_scss__WEBPACK_IMPORTED_MODULE_6__[\"default\"] && _node_modules_css_loader_dist_cjs_js_node_modules_sass_loader_dist_cjs_js_out_dial_call_styles_scss__WEBPACK_IMPORTED_MODULE_6__[\"default\"].locals ? _node_modules_css_loader_dist_cjs_js_node_modules_sass_loader_dist_cjs_js_out_dial_call_styles_scss__WEBPACK_IMPORTED_MODULE_6__[\"default\"].locals : undefined);\n\n\n//# sourceURL=webpack://@webex/cc-components/./src/components/OutdialCall/out-dial-call.styles.scss?");
+
+/***/ }),
+
 /***/ "./src/components/UserState/user-state.scss":
 /*!**************************************************!*\
   !*** ./src/components/UserState/user-state.scss ***!
@@ -1827,6 +1849,17 @@ eval("\n\n/* istanbul ignore next  */\nfunction styleTagTransform(css, styleElem
 
 /***/ }),
 
+/***/ "./src/components/OutdialCall/out-dial-call.tsx":
+/*!******************************************************!*\
+  !*** ./src/components/OutdialCall/out-dial-call.tsx ***!
+  \******************************************************/
+/***/ (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__(/*! ./out-dial-call.styles.scss */ \"./src/components/OutdialCall/out-dial-call.styles.scss\");\nconst OutdialCallComponent = (props) => {\n    const { startOutdial } = props;\n    const [destination, setDestination] = (0, react_1.useState)('');\n    const updateOutboundNumber = (e) => {\n        var _a;\n        // Allow only valid input that is digits, #, *, and +\n        const VALID_KEYPAD_CHARS = /[\\d#*+]/g;\n        const filteredValue = ((_a = e.target.value.match(VALID_KEYPAD_CHARS)) === null || _a === void 0 ? void 0 : _a.join('')) || '';\n        setDestination(filteredValue);\n    };\n    // Function to press a key on the outdial keypad.\n    const handelKeyPress = (value) => {\n        setDestination((prev) => prev + value);\n    };\n    return (react_1.default.createElement(\"div\", { className: \"out-dial-call-box\" },\n        react_1.default.createElement(\"section\", { className: \"out-dial-call-section-box\" },\n            react_1.default.createElement(\"fieldset\", { className: \"out-dial-call-fieldset\" },\n                react_1.default.createElement(\"legend\", { className: \"out-dial-call-legend-box\" }, \"Outdial Call\"),\n                react_1.default.createElement(\"div\", { className: \"keypad\" },\n                    react_1.default.createElement(\"input\", { onChange: updateOutboundNumber, id: \"outBoundDialNumber\", placeholder: \"Enter number to dial\", value: destination }),\n                    react_1.default.createElement(\"div\", { className: \"keys\" }, ['1', '2', '3', '4', '5', '6', '7', '8', '9', '*', '0', '#'].map((key) => (react_1.default.createElement(\"div\", { key: key, className: \"key\", onClick: () => handelKeyPress(key) }, key)))),\n                    react_1.default.createElement(\"button\", { className: \"out-dial-call-btn\", onClick: () => startOutdial(destination) },\n                        react_1.default.createElement(\"svg\", { xmlns: \"http://www.w3.org/2000/svg\", height: \"24\", viewBox: \"0 0 24 24\", width: \"24\" },\n                            react_1.default.createElement(\"path\", { d: \"M6.62 10.79a15.053 15.053 0 006.59 6.59l2.2-2.2a1 1 0 011.11-.27c1.12.45 2.33.69 3.58.69a1 1 0 011 1v3.5a1 1 0 01-1 1C10.29 21 3 13.71 3 4.5a1 1 0 011-1h3.5a1 1 0 011 1c0 1.25.24 2.46.69 3.58a1 1 0 01-.27 1.11l-2.2 2.2z\" }))))))));\n};\nexports[\"default\"] = OutdialCallComponent;\n\n\n//# sourceURL=webpack://@webex/cc-components/./src/components/OutdialCall/out-dial-call.tsx?");
+
+/***/ }),
+
 /***/ "./src/components/UserState/user-state.tsx":
 /*!*************************************************!*\
   !*** ./src/components/UserState/user-state.tsx ***!
@@ -1856,7 +1889,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexpo
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 "use strict";
-eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst react_to_web_component_1 = __importDefault(__webpack_require__(/*! @r2wc/react-to-web-component */ \"../../../node_modules/@r2wc/react-to-web-component/dist/react-to-web-component.cjs\"));\nconst user_state_1 = __importDefault(__webpack_require__(/*! ./components/UserState/user-state */ \"./src/components/UserState/user-state.tsx\"));\nconst WebUserState = (0, react_to_web_component_1.default)(user_state_1.default);\nif (!customElements.get('component-cc-user-state')) {\n    customElements.define('component-cc-user-state', WebUserState);\n}\n\n\n//# sourceURL=webpack://@webex/cc-components/./src/wc.ts?");
+eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst react_to_web_component_1 = __importDefault(__webpack_require__(/*! @r2wc/react-to-web-component */ \"../../../node_modules/@r2wc/react-to-web-component/dist/react-to-web-component.cjs\"));\nconst user_state_1 = __importDefault(__webpack_require__(/*! ./components/UserState/user-state */ \"./src/components/UserState/user-state.tsx\"));\nconst out_dial_call_1 = __importDefault(__webpack_require__(/*! ./components/OutdialCall/out-dial-call */ \"./src/components/OutdialCall/out-dial-call.tsx\"));\nconst WebUserState = (0, react_to_web_component_1.default)(user_state_1.default);\nconst WebOutdialCallComponent = (0, react_to_web_component_1.default)(out_dial_call_1.default);\nif (!customElements.get('component-cc-user-state')) {\n    customElements.define('component-cc-user-state', WebUserState);\n}\nif (!customElements.get('component-cc-out-dial-call')) {\n    customElements.define('component-cc-out-dial-call', WebOutdialCallComponent);\n}\n\n\n//# sourceURL=webpack://@webex/cc-components/./src/wc.ts?");
 
 /***/ }),
 

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