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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/index.js +34 -1
  2. package/dist/types/components/OutdialCall/out-dial-call.d.ts +5 -0
  3. package/dist/types/components/OutdialCall/out-dial-call.types.d.ts +17 -0
  4. package/dist/types/index.d.ts +3 -1
  5. package/dist/wc.js +34 -1
  6. package/package.json +2 -2
package/dist/index.js CHANGED
@@ -1706,6 +1706,17 @@ eval("var $51588fd411aace25$exports = __webpack_require__(/*! ./CollectionBuilde
1706
1706
 
1707
1707
  /***/ }),
1708
1708
 
1709
+ /***/ "../../../node_modules/css-loader/dist/cjs.js!../../../node_modules/sass-loader/dist/cjs.js!./src/components/OutdialCall/out-dial-call.styles.scss":
1710
+ /*!*********************************************************************************************************************************************************!*\
1711
+ !*** ../../../node_modules/css-loader/dist/cjs.js!../../../node_modules/sass-loader/dist/cjs.js!./src/components/OutdialCall/out-dial-call.styles.scss ***!
1712
+ \*********************************************************************************************************************************************************/
1713
+ /***/ ((module, __webpack_exports__, __webpack_require__) => {
1714
+
1715
+ "use strict";
1716
+ 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");
1717
+
1718
+ /***/ }),
1719
+
1709
1720
  /***/ "../../../node_modules/css-loader/dist/cjs.js!../../../node_modules/sass-loader/dist/cjs.js!./src/components/UserState/user-state.scss":
1710
1721
  /*!*********************************************************************************************************************************************!*\
1711
1722
  !*** ../../../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
1739
1750
 
1740
1751
  /***/ }),
1741
1752
 
1753
+ /***/ "./src/components/OutdialCall/out-dial-call.styles.scss":
1754
+ /*!**************************************************************!*\
1755
+ !*** ./src/components/OutdialCall/out-dial-call.styles.scss ***!
1756
+ \**************************************************************/
1757
+ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
1758
+
1759
+ "use strict";
1760
+ 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?");
1761
+
1762
+ /***/ }),
1763
+
1742
1764
  /***/ "./src/components/UserState/user-state.scss":
1743
1765
  /*!**************************************************!*\
1744
1766
  !*** ./src/components/UserState/user-state.scss ***!
@@ -1816,6 +1838,17 @@ eval("\n\n/* istanbul ignore next */\nfunction styleTagTransform(css, styleElem
1816
1838
 
1817
1839
  /***/ }),
1818
1840
 
1841
+ /***/ "./src/components/OutdialCall/out-dial-call.tsx":
1842
+ /*!******************************************************!*\
1843
+ !*** ./src/components/OutdialCall/out-dial-call.tsx ***!
1844
+ \******************************************************/
1845
+ /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
1846
+
1847
+ "use strict";
1848
+ 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?");
1849
+
1850
+ /***/ }),
1851
+
1819
1852
  /***/ "./src/components/UserState/user-state.tsx":
1820
1853
  /*!*************************************************!*\
1821
1854
  !*** ./src/components/UserState/user-state.tsx ***!
@@ -1834,7 +1867,7 @@ eval("\nvar __importDefault = (this && this.__importDefault) || function (mod) {
1834
1867
  /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
1835
1868
 
1836
1869
  "use strict";
1837
- 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?");
1870
+ 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?");
1838
1871
 
1839
1872
  /***/ }),
1840
1873
 
package/dist/types/components/OutdialCall/out-dial-call.d.ts ADDED
@@ -0,0 +1,5 @@
1
+ import React from 'react';
2
+ import { OutdialCallComponentProps } from './out-dial-call.types';
3
+ import './out-dial-call.styles.scss';
4
+ declare const OutdialCallComponent: React.FunctionComponent<OutdialCallComponentProps>;
5
+ export default OutdialCallComponent;
package/dist/types/components/OutdialCall/out-dial-call.types.d.ts ADDED
@@ -0,0 +1,17 @@
1
+ import { ILogger, IContactCenter } from '@webex/cc-store';
2
+ export interface IOutdialCall {
3
+ /**
4
+ * Function to start outdial call.
5
+ */
6
+ startOutdial: (destination: string) => void;
7
+ /**
8
+ * CC SDK Instance.
9
+ */
10
+ cc: IContactCenter;
11
+ /**
12
+ * Logger instance for logging purpose.
13
+ */
14
+ logger: ILogger;
15
+ }
16
+ export type OutdialCallComponentProps = Pick<IOutdialCall, 'startOutdial'>;
17
+ export type useOutdialCallProps = Pick<IOutdialCall, 'cc' | 'logger'>;
package/dist/types/index.d.ts CHANGED
@@ -1,3 +1,5 @@
1
1
  import UserStateComponent from './components/UserState/user-state';
2
2
  import { IUserState } from './components/UserState/user-state.types';
3
- export { UserStateComponent, type IUserState };
3
+ import OutdialCallComponent from './components/OutdialCall/out-dial-call';
4
+ import { IOutdialCall } from './components/OutdialCall/out-dial-call.types';
5
+ export { UserStateComponent, type IUserState, OutdialCallComponent, type IOutdialCall };
package/dist/wc.js CHANGED
@@ -1706,6 +1706,17 @@ eval("var $51588fd411aace25$exports = __webpack_require__(/*! ./CollectionBuilde
1706
1706
 
1707
1707
  /***/ }),
1708
1708
 
1709
+ /***/ "../../../node_modules/css-loader/dist/cjs.js!../../../node_modules/sass-loader/dist/cjs.js!./src/components/OutdialCall/out-dial-call.styles.scss":
1710
+ /*!*********************************************************************************************************************************************************!*\
1711
+ !*** ../../../node_modules/css-loader/dist/cjs.js!../../../node_modules/sass-loader/dist/cjs.js!./src/components/OutdialCall/out-dial-call.styles.scss ***!
1712
+ \*********************************************************************************************************************************************************/
1713
+ /***/ ((module, __webpack_exports__, __webpack_require__) => {
1714
+
1715
+ "use strict";
1716
+ 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");
1717
+
1718
+ /***/ }),
1719
+
1709
1720
  /***/ "../../../node_modules/css-loader/dist/cjs.js!../../../node_modules/sass-loader/dist/cjs.js!./src/components/UserState/user-state.scss":
1710
1721
  /*!*********************************************************************************************************************************************!*\
1711
1722
  !*** ../../../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
1750
1761
 
1751
1762
  /***/ }),
1752
1763
 
1764
+ /***/ "./src/components/OutdialCall/out-dial-call.styles.scss":
1765
+ /*!**************************************************************!*\
1766
+ !*** ./src/components/OutdialCall/out-dial-call.styles.scss ***!
1767
+ \**************************************************************/
1768
+ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
1769
+
1770
+ "use strict";
1771
+ 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?");
1772
+
1773
+ /***/ }),
1774
+
1753
1775
  /***/ "./src/components/UserState/user-state.scss":
1754
1776
  /*!**************************************************!*\
1755
1777
  !*** ./src/components/UserState/user-state.scss ***!
@@ -1827,6 +1849,17 @@ eval("\n\n/* istanbul ignore next */\nfunction styleTagTransform(css, styleElem
1827
1849
 
1828
1850
  /***/ }),
1829
1851
 
1852
+ /***/ "./src/components/OutdialCall/out-dial-call.tsx":
1853
+ /*!******************************************************!*\
1854
+ !*** ./src/components/OutdialCall/out-dial-call.tsx ***!
1855
+ \******************************************************/
1856
+ /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
1857
+
1858
+ "use strict";
1859
+ 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?");
1860
+
1861
+ /***/ }),
1862
+
1830
1863
  /***/ "./src/components/UserState/user-state.tsx":
1831
1864
  /*!*************************************************!*\
1832
1865
  !*** ./src/components/UserState/user-state.tsx ***!
@@ -1856,7 +1889,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexpo
1856
1889
  /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
1857
1890
 
1858
1891
  "use strict";
1859
- 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?");
1892
+ 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?");
1860
1893
 
1861
1894
  /***/ }),
1862
1895
 
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@webex/cc-components",
3
3
  "description": "Webex Contact Center UI Components Library for your custom contact center solutions",
4
- "version": "1.28.0-ccwidgets.34",
4
+ "version": "1.28.0-ccwidgets.36",
5
5
  "main": "dist/index.js",
6
6
  "publishConfig": {
7
7
  "access": "public"
@@ -25,7 +25,7 @@
25
25
  },
26
26
  "dependencies": {
27
27
  "@r2wc/react-to-web-component": "2.0.3",
28
- "@webex/cc-store": "1.28.0-ccwidgets.34"
28
+ "@webex/cc-store": "1.28.0-ccwidgets.36"
29
29
  },
30
30
  "devDependencies": {
31
31
  "@babel/core": "7.25.2",