@agilemotion/oui-react-js 1.6.3 → 1.6.5

package/dist/components/SocketManager.js

@@ -4,253 +4,158 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _socket = _interopRequireDefault(require("socket.io-client"));
-
 var _SocketRequest = _interopRequireDefault(require("./media/SocketRequest"));
-
 var _RestUtils = require("../RestUtils");
-
 var _ApplicationManager = _interopRequireDefault(require("../ApplicationManager"));
-
 var _EventType = _interopRequireDefault(require("../event/EventType"));
-
 var _VCEventManager = _interopRequireDefault(require("./media/VCEventManager"));
-
 var _Event = _interopRequireDefault(require("../event/Event"));
-
 var _VCEventType = require("./media/VCEventType");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _createForOfIteratorHelper(o, allowArrayLike) { var it; if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = o[Symbol.iterator](); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
-
-function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-var SocketManager = /*#__PURE__*/function () {
-  function SocketManager() {
-    var _this = this;
-
-    _classCallCheck(this, SocketManager);
-
-    _defineProperty(this, "getProfile", function () {
-      return _this.profile;
-    });
-
-    _defineProperty(this, "emitEvent", function (eventType, data) {
-      return new Promise(function (resolve, reject) {
-        if (_this.socket) {
-          console.log("EMITTING EVENT : " + eventType);
-
-          var response = _this.socket.emit(eventType, data, function (data) {
-            console.log("EMITTING EVENT RESULT : " + eventType, data);
-
-            if (data.status === 'SUCCESS') {
-              resolve(data);
-            } else {
-              console.log("ERROR EMITTING EVENT : " + eventType);
-              reject(new Error(data.status));
-            }
-          });
-
-          if (!response.connected) {
-            reject(new Error("CONNECTION_ERROR"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+class SocketManager {
+  constructor() {
+    this.usersOnline = [];
+    this.profile = null;
+  }
+  getProfile = () => {
+    return this.profile;
+  };
+  emitEvent = (eventType, data) => {
+    return new Promise((resolve, reject) => {
+      if (this.socket) {
+        console.log("EMITTING EVENT : " + eventType);
+        let response = this.socket.emit(eventType, data, data => {
+          console.log("EMITTING EVENT RESULT : " + eventType, data);
+          if (data.status === 'SUCCESS') {
+            resolve(data);
+          } else {
+            console.log("ERROR EMITTING EVENT : " + eventType);
+            reject(new Error(data.status));
           }
-        } else {
+        });
+        if (!response.connected) {
           reject(new Error("CONNECTION_ERROR"));
         }
-      });
+      } else {
+        reject(new Error("CONNECTION_ERROR"));
+      }
     });
-
-    _defineProperty(this, "init", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
-      var url, socket, _loop, _i, _Object$keys;
-
-      return regeneratorRuntime.wrap(function _callee$(_context) {
-        while (1) {
-          switch (_context.prev = _context.next) {
-            case 0:
-              url = process.env.REACT_APP_SOCKET_SERVER_URL || 'https://svn.agilemotion.co.za';
-              console.log("======= SOCKET CONNECTING TO ========= [" + url + "]");
-              socket = _socket.default.connect(url);
-              _this.socket = socket;
-              socket.on("connect", function () {
-                _this.registerOnline();
-              });
-              socket.on('disconnect', function () {
-                _VCEventManager.default.fireEvent(_VCEventType.VCEventType.SOCKET_DISCONNECT, {});
-              });
-
-              _loop = function _loop() {
-                var value = _Object$keys[_i];
-                socket.on(value, function (payload) {
-                  console.log('EVENT: ', value);
-
-                  if (value !== _VCEventType.VCEventType.USERS_ONLINE && value !== _VCEventType.VCEventType.USER_ONLINE && value !== _VCEventType.VCEventType.USER_OFFLINE) {
-                    _VCEventManager.default.fireEvent(value, {
-                      socket: _this.socket,
-                      payload: payload
-                    });
-                  }
-                });
-              };
-
-              for (_i = 0, _Object$keys = Object.keys(_VCEventType.VCEventType); _i < _Object$keys.length; _i++) {
-                _loop();
-              }
-
-              socket.on(_VCEventType.VCEventType.USERS_ONLINE, function (payload) {
-                _this.usersOnline.splice(0, _this.usersOnline.length);
-
-                var _iterator = _createForOfIteratorHelper(payload),
-                    _step;
-
-                try {
-                  for (_iterator.s(); !(_step = _iterator.n()).done;) {
-                    var payloadElement = _step.value;
-
-                    _this.usersOnline.push(payloadElement);
-                  }
-                } catch (err) {
-                  _iterator.e(err);
-                } finally {
-                  _iterator.f();
-                }
-
-                _VCEventManager.default.fireEvent(_VCEventType.VCEventType.USERS_ONLINE, {
-                  socket: _this.socket,
-                  payload: payload
-                });
-              });
-              socket.on(_VCEventType.VCEventType.USER_ONLINE, function (payload) {
-                _this.usersOnline.push(payload);
-
-                _VCEventManager.default.fireEvent(_VCEventType.VCEventType.USER_ONLINE, {
-                  socket: _this.socket,
-                  payload: payload
-                });
-              });
-              socket.on(_VCEventType.VCEventType.USER_OFFLINE, function (payload) {
-                for (var i = 0; i < _this.usersOnline.length; i++) {
-                  console.log(_this.usersOnline[i].userId + " === " + payload.userId);
-
-                  if (_this.usersOnline[i].userId === payload.userId) {
-                    _this.usersOnline.splice(i, 1);
-                  }
-                }
-
-                _VCEventManager.default.fireEvent(_VCEventType.VCEventType.USER_OFFLINE, {
-                  socket: _this.socket,
-                  payload: payload
-                });
-              });
-
-            case 11:
-            case "end":
-              return _context.stop();
-          }
+  };
+  init = async () => {
+    let url = process.env.REACT_APP_SOCKET_SERVER_URL || 'https://svn.agilemotion.co.za';
+    console.log("======= SOCKET CONNECTING TO ========= [" + url + "]");
+    let socket = _socket.default.connect(url);
+    this.socket = socket;
+    socket.on("connect", () => {
+      this.registerOnline();
+    });
+    socket.on('disconnect', () => {
+      _VCEventManager.default.fireEvent(_VCEventType.VCEventType.SOCKET_DISCONNECT, {});
+    });
+    for (const value of Object.keys(_VCEventType.VCEventType)) {
+      socket.on(value, payload => {
+        console.log('EVENT: ', value);
+        if (value !== _VCEventType.VCEventType.USERS_ONLINE && value !== _VCEventType.VCEventType.USER_ONLINE && value !== _VCEventType.VCEventType.USER_OFFLINE) {
+          _VCEventManager.default.fireEvent(value, {
+            socket: this.socket,
+            payload: payload
+          });
         }
-      }, _callee);
-    })));
-
-    _defineProperty(this, "leaveMeeting", function (meetingId) {
-      if (_this.socket) {
-        _this.emitEvent(_VCEventType.VCEventType.LEAVE_MEETING, {
-          userId: sessionStorage.getItem("username"),
-          meetingId: meetingId
-        }).catch(function (error) {});
+      });
+    }
+    socket.on(_VCEventType.VCEventType.USERS_ONLINE, payload => {
+      this.usersOnline.splice(0, this.usersOnline.length);
+      for (const payloadElement of payload) {
+        this.usersOnline.push(payloadElement);
       }
+      _VCEventManager.default.fireEvent(_VCEventType.VCEventType.USERS_ONLINE, {
+        socket: this.socket,
+        payload: payload
+      });
     });
-
-    _defineProperty(this, "endSession", function (meetingId) {
-      if (_this.socket) {
-        _this.emitEvent(_VCEventType.VCEventType.LEAVE_MEETING, {
-          userId: sessionStorage.getItem("username"),
-          meetingId: meetingId
-        }).then(function () {
-          _this.emitEvent(_VCEventType.VCEventType.END_SESSION, {
-            userId: sessionStorage.getItem("username"),
-            meetingId: meetingId
-          }).catch(function (error) {});
-        }).catch(function (error) {});
+    socket.on(_VCEventType.VCEventType.USER_ONLINE, payload => {
+      this.usersOnline.push(payload);
+      _VCEventManager.default.fireEvent(_VCEventType.VCEventType.USER_ONLINE, {
+        socket: this.socket,
+        payload: payload
+      });
+    });
+    socket.on(_VCEventType.VCEventType.USER_OFFLINE, payload => {
+      for (let i = 0; i < this.usersOnline.length; i++) {
+        console.log(this.usersOnline[i].userId + " === " + payload.userId);
+        if (this.usersOnline[i].userId === payload.userId) {
+          this.usersOnline.splice(i, 1);
+        }
       }
+      _VCEventManager.default.fireEvent(_VCEventType.VCEventType.USER_OFFLINE, {
+        socket: this.socket,
+        payload: payload
+      });
     });
-
-    this.usersOnline = [];
-    this.profile = null;
-  }
-
-  _createClass(SocketManager, [{
-    key: "registerOnline",
-    value: function registerOnline() {
-      var _this2 = this;
-
-      console.log('***** FETCHIN SOCKET MANAGER USER PROFILE *****');
-      (0, _RestUtils.sendRequest)(_RestUtils.location + _ApplicationManager.default.getContextRoot() + '/auth/api/v1/user/find', function (response) {
-        _this2.profile = response.profile;
-        console.log("PROFILE : ", response);
-        console.log("REGISTERING ONLINE");
-
-        _this2.emitEvent(_SocketRequest.default.REGISTER_ONLINE, {
-          user: {
-            userId: response.username,
-            name: response.name + ' ' + response.surname
-          },
-          orgCode: response.profile
-        }).then(function (data) {
-          console.log("REGISTERED ONLINE - " + response.username);
-          _this2.connected = true;
-
-          var event = _this2.createEvent();
-
-          _VCEventManager.default.fireEvent(_EventType.default.SOCKET_CONNECT, event);
-        }).catch(function (exp) {
-          console.log(exp);
-        });
-      }, function (e) {
-        console.log("ERROR FETCHING PROFILE");
-        console.log(e);
+  };
+  registerOnline() {
+    console.log('***** FETCHIN SOCKET MANAGER USER PROFILE *****');
+    (0, _RestUtils.sendRequest)(_RestUtils.location + _ApplicationManager.default.getContextRoot() + '/auth/api/v1/user/find', response => {
+      this.profile = response.profile;
+      console.log("PROFILE : ", response);
+      console.log("REGISTERING ONLINE");
+      this.emitEvent(_SocketRequest.default.REGISTER_ONLINE, {
+        user: {
+          userId: response.username,
+          name: response.name + ' ' + response.surname
+        },
+        orgCode: response.profile
+      }).then(data => {
+        console.log("REGISTERED ONLINE - " + response.username);
+        this.connected = true;
+        let event = this.createEvent();
+        _VCEventManager.default.fireEvent(_EventType.default.SOCKET_CONNECT, event);
+      }).catch(exp => {
+        console.log(exp);
       });
+    }, e => {
+      console.log("ERROR FETCHING PROFILE");
+      console.log(e);
+    });
+  }
+  leaveMeeting = meetingId => {
+    if (this.socket) {
+      this.emitEvent(_VCEventType.VCEventType.LEAVE_MEETING, {
+        userId: sessionStorage.getItem("username"),
+        meetingId: meetingId
+      }).catch(error => {});
     }
-  }, {
-    key: "createEvent",
-    value: function createEvent() {
-      var data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
-      return new _Event.default({
-        api: {
-          get id() {
-            return "sockets";
-          }
-
-        }
-      }, "dashboard", data);
+  };
+  endSession = meetingId => {
+    if (this.socket) {
+      this.emitEvent(_VCEventType.VCEventType.LEAVE_MEETING, {
+        userId: sessionStorage.getItem("username"),
+        meetingId: meetingId
+      }).then(() => {
+        this.emitEvent(_VCEventType.VCEventType.END_SESSION, {
+          userId: sessionStorage.getItem("username"),
+          meetingId: meetingId
+        }).catch(error => {});
+      }).catch(error => {});
     }
-  }, {
-    key: "disconnect",
-    value: function disconnect() {
-      if (this.socket) {
-        this.socket.disconnect();
+  };
+  createEvent() {
+    let data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+    return new _Event.default({
+      api: {
+        get id() {
+          return "sockets";
+        }
       }
+    }, "dashboard", data);
+  }
+  disconnect() {
+    if (this.socket) {
+      this.socket.disconnect();
     }
-  }]);
-
-  return SocketManager;
-}();
-
-var instance = new SocketManager(); //Object.freeze(instance);
-
-var _default = instance;
-exports.default = _default;
+  }
+}
+const instance = new SocketManager();
+//Object.freeze(instance);
+var _default = exports.default = instance;

package/dist/components/StepperTitleBar.js

@@ -4,89 +4,50 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _Utils = _interopRequireDefault(require("../Utils"));
-
 var _ApplicationManager = _interopRequireDefault(require("../ApplicationManager"));
-
 var _Observable = _interopRequireDefault(require("../event/Observable"));
-
 var _EventType = _interopRequireDefault(require("../event/EventType"));
-
 var _core = require("@material-ui/core");
-
 require("./StepperTitleBar.css");
-
 var _jquery = _interopRequireDefault(require("jquery"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
-var useStyles = (0, _core.makeStyles)(function (theme) {
-  return {
-    theme: {
-      backgroundColor: theme.palette.secondary.main
-    },
-    themeBorder: {
-      borderColor: theme.palette.secondary.main
-    }
-  };
-});
-
-var StepperTitleBar = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
-  var _React$useState = _react.default.useState(null),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      steps = _React$useState2[0],
-      setSteps = _React$useState2[1];
-
-  var _React$useState3 = _react.default.useState(null),
-      _React$useState4 = _slicedToArray(_React$useState3, 2),
-      activeSegmentPercentage = _React$useState4[0],
-      setActiveSegmentPercentage = _React$useState4[1];
-
-  var currentIndex = _react.default.useRef(null);
-
-  var keyCounter = 0;
-  var counter = 0;
-  var graphicsCounter = 0;
-  var classes = useStyles();
-
-  _react.default.useEffect(function () {
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const useStyles = (0, _core.makeStyles)(theme => ({
+  theme: {
+    backgroundColor: theme.palette.secondary.main
+  },
+  themeBorder: {
+    borderColor: theme.palette.secondary.main
+  }
+}));
+const StepperTitleBar = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+  const [steps, setSteps] = _react.default.useState(null);
+  const [activeSegmentPercentage, setActiveSegmentPercentage] = _react.default.useState(null);
+  const currentIndex = _react.default.useRef(null);
+  let keyCounter = 0;
+  let counter = 0;
+  let graphicsCounter = 0;
+  const classes = useStyles();
+  _react.default.useEffect(() => {
     props.handle.api = api();
   });
-
-  _react.default.useEffect(function () {
-    var parsedConfig = _Utils.default.parseConfig(props.config, props.viewId);
-
-    var eventHandlingConfig = _Utils.default.isNull(parsedConfig.eventHandlingConfig) ? {} : parsedConfig.eventHandlingConfig;
+  _react.default.useEffect(() => {
+    let parsedConfig = _Utils.default.parseConfig(props.config, props.viewId);
+    let eventHandlingConfig = _Utils.default.isNull(parsedConfig.eventHandlingConfig) ? {} : parsedConfig.eventHandlingConfig;
     eventHandlingConfig.subscriptions = _Utils.default.isNull(eventHandlingConfig.subscriptions) ? [] : eventHandlingConfig.subscriptions;
-    var subscription = {
+    let subscription = {
       publisher: "applicationManager",
       eventType: _EventType.default.APPLICATION_CONTEXT_CHANGE,
       actions: [{
         actionType: "script",
         script: {
-          lines: ["if($event.data.name === 'stepperTitle'){", "   @#{".concat(props.config.id, "}.show()"), "}"]
+          lines: [`if($event.data.name === 'stepperTitle'){`, `   @#{${props.config.id}}.show()`, "}"]
         }
       }]
     };
     eventHandlingConfig.subscriptions.push(subscription);
-
     _Observable.default.addSubscriptions(eventHandlingConfig, props.handle, props.viewId);
-
     (0, _jquery.default)(document).ready(function () {
       recalcLinePosition();
     });
@@ -95,13 +56,11 @@ var StepperTitleBar = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.defa
     });
     recalcLinePosition();
   }, []);
-
-  var recalcLinePosition = function recalcLinePosition() {
-    var titleDiv = (0, _jquery.default)("#titleDiv");
-    var step = (0, _jquery.default)("#step-container-" + currentIndex.current);
-
+  const recalcLinePosition = () => {
+    let titleDiv = (0, _jquery.default)("#titleDiv");
+    let step = (0, _jquery.default)("#step-container-" + currentIndex.current);
     if (currentIndex.current !== null && !_Utils.default.isNull(step.width())) {
-      var titleWidth = titleDiv.width() + 46;
+      let titleWidth = titleDiv.width() + 46;
       (0, _jquery.default)(".stepActive .rightLine").css({
         'margin-left': currentIndex.current === 0 ? titleWidth : titleWidth / 2 + step.width() / 2 - 2 + 'px',
         'width': currentIndex.current === 0 ? step.width() - titleWidth + 2 : step.width() / 2 - titleWidth / 2 + 'px'
@@ -111,33 +70,29 @@ var StepperTitleBar = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.defa
       });
     }
   };
-
-  var api = function api() {
+  const api = () => {
     return {
       get id() {
         return props.config.id;
       },
-
-      getChildren: function getChildren() {
+      getChildren: () => {
         return [];
       },
-      show: function show() {
-        var steps = _ApplicationManager.default.graphs[0].getTitleStack();
-
+      show() {
+        let steps = _ApplicationManager.default.graphs[0].getTitleStack();
         setSteps(steps);
         currentIndex.current = _ApplicationManager.default.graphs[0].getCurrentNodeIndex();
         setActiveSegmentPercentage(100 - 10 * (steps.length - 1));
       }
     };
   };
-
   function renderStep(step) {
     return /*#__PURE__*/_react.default.createElement("div", {
-      className: graphicsCounter === currentIndex.current ? "stepActive" : graphicsCounter < currentIndex.current ? 'stepVisited' : 'step'
+      className: graphicsCounter === currentIndex.current ? `stepActive` : graphicsCounter < currentIndex.current ? 'stepVisited' : 'step'
     }, graphicsCounter > 0 ? /*#__PURE__*/_react.default.createElement("div", {
-      className: (graphicsCounter <= currentIndex.current ? "".concat(classes.themeBorder, " ") : '') + 'leftLine' + (graphicsCounter === steps.length - 1 ? ' lastLine' : '')
+      className: (graphicsCounter <= currentIndex.current ? `${classes.themeBorder} ` : '') + 'leftLine' + (graphicsCounter === steps.length - 1 ? ' lastLine' : '')
     }) : null, /*#__PURE__*/_react.default.createElement("div", {
-      className: (graphicsCounter <= currentIndex.current ? "".concat(classes.theme, " box row") : 'box') + (graphicsCounter === 0 ? ' firstBox' : ''),
+      className: (graphicsCounter <= currentIndex.current ? `${classes.theme} box row` : 'box') + (graphicsCounter === 0 ? ' firstBox' : ''),
       style: {
         marginLeft: 'unset',
         marginRight: 'unset'
@@ -146,13 +101,12 @@ var StepperTitleBar = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.defa
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: 'dot col-*-*'
     }, step.index + 1), graphicsCounter === currentIndex.current ? /*#__PURE__*/_react.default.createElement("div", {
-      className: "title col-*-*",
+      className: `title col-*-*`,
       id: "titleDiv"
     }, step.title) : null), graphicsCounter < steps.length - 1 ? /*#__PURE__*/_react.default.createElement("div", {
-      className: (graphicsCounter < currentIndex.current ? "".concat(classes.themeBorder, " ") : '') + 'rightLine' + (graphicsCounter === 0 ? ' firstLine' : '')
+      className: (graphicsCounter < currentIndex.current ? `${classes.themeBorder} ` : '') + 'rightLine' + (graphicsCounter === 0 ? ' firstLine' : '')
     }) : null, graphicsCounter++ ? null : null);
   }
-
   function render() {
     return /*#__PURE__*/_react.default.createElement("div", {
       className: "w-100",
@@ -165,21 +119,18 @@ var StepperTitleBar = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.defa
         borderCollapse: "collapse",
         width: "100%"
       }
-    }, /*#__PURE__*/_react.default.createElement("tbody", null, /*#__PURE__*/_react.default.createElement("tr", null, steps.map(function (step) {
-      return /*#__PURE__*/_react.default.createElement("td", {
-        align: graphicsCounter === 0 ? 'left' : graphicsCounter === steps.length - 1 ? 'right' : 'center',
-        key: keyCounter++,
-        style: {
-          whiteSpace: "nowrap",
-          paddingTop: '8px',
-          maxHeight: '8px',
-          width: (graphicsCounter === currentIndex.current ? activeSegmentPercentage : 10) + '%'
-        },
-        id: 'step-container-' + counter++
-      }, renderStep(step));
-    })))));
+    }, /*#__PURE__*/_react.default.createElement("tbody", null, /*#__PURE__*/_react.default.createElement("tr", null, steps.map(step => /*#__PURE__*/_react.default.createElement("td", {
+      align: graphicsCounter === 0 ? 'left' : graphicsCounter === steps.length - 1 ? 'right' : 'center',
+      key: keyCounter++,
+      style: {
+        whiteSpace: "nowrap",
+        paddingTop: '8px',
+        maxHeight: '8px',
+        width: (graphicsCounter === currentIndex.current ? activeSegmentPercentage : 10) + '%'
+      },
+      id: 'step-container-' + counter++
+    }, renderStep(step)))))));
   }
-
   return /*#__PURE__*/_react.default.createElement("div", {
     ref: ref
   }, !_Utils.default.isNull(props.config) ? /*#__PURE__*/_react.default.createElement("div", {
@@ -191,6 +142,4 @@ var StepperTitleBar = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.defa
     }, props.config)
   }, !_Utils.default.isNull(steps) && !_Utils.default.isNull(activeSegmentPercentage) && !_Utils.default.isNull(currentIndex.current) ? render() : null) : null);
 }));
-
-var _default = StepperTitleBar;
-exports.default = _default;
+var _default = exports.default = StepperTitleBar;