asab_webui_shell 25.1.1

package/dist/services/AttentionRequiredService.js

@@ -0,0 +1,169 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _asab_webui_components = require("asab_webui_components");
+var _actions = require("../actions");
+function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+// Service handling attention required
+var AttentionRequiredService = exports["default"] = /*#__PURE__*/function (_Service) {
+  function AttentionRequiredService(app) {
+    var _this;
+    var serviceName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "AttentionRequiredService";
+    (0, _classCallCheck2["default"])(this, AttentionRequiredService);
+    _this = _callSuper(this, AttentionRequiredService, [app, serviceName]);
+    _this.beaconWebSocket = null; // beacon websocket variable
+    _this.reconnectTimeout = null; // timeout variable
+    _this.reconnectInterval = 5000; // initial reconnection interval (5 seconds)
+    return _this;
+  }
+
+  // Start beacon websocket connection on initialization
+  (0, _inherits2["default"])(AttentionRequiredService, _Service);
+  return (0, _createClass2["default"])(AttentionRequiredService, [{
+    key: "initialize",
+    value: function initialize() {
+      this.connectBeaconWebSocket();
+    }
+
+    // Method for connection to beacon websocket
+  }, {
+    key: "connectBeaconWebSocket",
+    value: function connectBeaconWebSocket() {
+      var _this$App,
+        _this2 = this;
+      // Retrieve current tenant
+      var currentTenant = (_this$App = this.App) === null || _this$App === void 0 || (_this$App = _this$App.Services) === null || _this$App === void 0 || (_this$App = _this$App.TenantService) === null || _this$App === void 0 ? void 0 : _this$App.getCurrentTenant();
+      // Gracefully reconnect if tenant was not found
+      if (!currentTenant) {
+        console.error("Beacon WebSocket error: Tenant was not found!");
+        this.reconnectBeaconWebSocket();
+        return;
+      }
+      var BeaconServiceClient = this.App.createWebSocket('asab-remote-control', "/beacon/".concat(currentTenant, "/ws"));
+      this.beaconWebSocket = BeaconServiceClient;
+      this.beaconWebSocket.onopen = function () {
+        // TODO: may be removed
+        console.log('Beacon WebSocket connection established.');
+      };
+      this.beaconWebSocket.onmessage = function (message) {
+        try {
+          var data = JSON.parse(message.data);
+          // TODO: implement some type based recognition
+          _this2.distributeData(data);
+        } catch (e) {
+          console.error("Error parsing Beacon WebSocket message data:", e);
+          _this2.distributeData({});
+        }
+      };
+      this.beaconWebSocket.onerror = function (error) {
+        console.error("Beacon WebSocket error:", error);
+        console.error("Beacon WebSocket is attempting to reconnect...");
+        _this2.distributeData({});
+        _this2.reconnectBeaconWebSocket();
+      };
+      this.beaconWebSocket.onclose = function () {
+        /*
+        	WebSocket connection is closed by the browser automatically when user
+        	leaves the application (not the screen).
+        */
+        if (_this2.beaconWebSocket) {
+          // Close the WebSocket connection
+          _this2.beaconWebSocket.close();
+
+          // Clean up event listeners
+          _this2.beaconWebSocket.onopen = null;
+          _this2.beaconWebSocket.onmessage = null;
+          _this2.beaconWebSocket.onerror = null;
+          _this2.beaconWebSocket.onclose = null;
+
+          // Set WebSocket reference to null to free up memory
+          _this2.beaconWebSocket = null;
+        }
+
+        // Clear the reconnect timeout if it exists
+        if (_this2.reconnectTimeout) {
+          clearTimeout(_this2.reconnectTimeout);
+          _this2.reconnectTimeout = null;
+        }
+        console.log("Beacon WebSocket connection closed.");
+      };
+    }
+
+    // Method for reconnection to beacon websocket
+  }, {
+    key: "reconnectBeaconWebSocket",
+    value: function reconnectBeaconWebSocket() {
+      var _this3 = this;
+      if (this.reconnectTimeout) {
+        clearTimeout(this.reconnectTimeout);
+      }
+      this.reconnectTimeout = setTimeout(function () {
+        _this3.connectBeaconWebSocket();
+      }, this.reconnectInterval); // Retry connection after the reconnection interval
+
+      // Increase reconnection time by 5s, the limit is 60s (so that we dont overload the server)
+      if (this.reconnectInterval + 5000 <= 60000) {
+        this.reconnectInterval += 5000;
+      }
+    }
+
+    // Method for distributing the data into redux store
+  }, {
+    key: "distributeData",
+    value: function distributeData(data) {
+      var transformedData = this.transformData(data);
+      this.App.Store.dispatch({
+        type: _actions.SET_ATTENTION_REQUIRED_BEACON,
+        beacon: transformedData
+      });
+    }
+
+    // Transform and group beacon data
+  }, {
+    key: "transformData",
+    value: function transformData(inputData) {
+      // Validate if input data are array
+      if (!Array.isArray(inputData)) {
+        return {};
+      }
+      return inputData.reduce(function (acc, entry) {
+        var type = entry.type,
+          _c = entry._c,
+          reference_path = entry.reference_path;
+
+        // Identify the dynamic key (it could be 'library', 'configuration', 'services', etc.)
+        var dynamicKey = Object.keys(entry).find(function (key) {
+          return (0, _typeof2["default"])(entry[key]) === 'object' && entry[key] !== null && !Array.isArray(entry[key]);
+        });
+        if (!dynamicKey) {
+          // Skip if no valid dynamic key is found
+          return acc;
+        }
+        var data = entry[dynamicKey];
+        // Ensure type is present in the accumulator
+        if (!acc[type]) {
+          acc[type] = {
+            count: 0,
+            data: []
+          };
+        }
+        // Push each entry into the data array
+        acc[type].data.push(data);
+        // Increment count for the type
+        acc[type].count += 1;
+        return acc;
+      }, {});
+    }
+  }]);
+}(_asab_webui_components.Service);

package/dist/services/BrandingService.js

@@ -0,0 +1,104 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _asab_webui_components = require("asab_webui_components");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+var BrandingService = exports["default"] = /*#__PURE__*/function (_Service) {
+  /*
+  Branding service expects `header-logo-full.svg` and `header-logo-minimized.svg` SVG images
+  in `/public/media/logo/` directory:
+  	* `header-logo-full.svg` dimensions: 150 x 50 pixels
+  * `header-logo-minimized.svg` dimensions: 50 x 50 pixels
+  */
+
+  function BrandingService(app) {
+    var _this;
+    var serviceName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "BrandingService";
+    (0, _classCallCheck2["default"])(this, BrandingService);
+    _this = _callSuper(this, BrandingService, [app, serviceName]);
+    _this.state = [];
+    _this.App = app;
+    _this.brandImage = undefined;
+    _this.defaultBrandImage = undefined;
+    _this.sidebarLogo = undefined;
+    return _this;
+  }
+  (0, _inherits2["default"])(BrandingService, _Service);
+  return (0, _createClass2["default"])(BrandingService, [{
+    key: "initialize",
+    value: function initialize() {
+      if (this.App.Services.ConfigService) {
+        this.brandImage = this.App.Config.get('brandImage');
+        this.defaultBrandImage = this.App.Config.get('defaultBrandImage');
+        this.sidebarLogo = this.App.Config.get('sidebarLogo');
+      }
+    }
+
+    /*  This method returns object containing paths to branding depending on theme. It also  takes care of filling in missing
+    values (e.g. when only minimized version was provided in the configuration, the method completes it with full version) */
+  }, {
+    key: "_determineSources",
+    value: function _determineSources(imgObject, theme) {
+      var _imgObject$theme, _imgObject$theme2, _imgObject$theme3, _imgObject$theme4;
+      if ((_imgObject$theme = imgObject[theme]) !== null && _imgObject$theme !== void 0 && _imgObject$theme.minimized && (_imgObject$theme2 = imgObject[theme]) !== null && _imgObject$theme2 !== void 0 && _imgObject$theme2.full) {
+        var _imgObject$href;
+        return _objectSpread(_objectSpread({}, imgObject[theme]), {}, {
+          href: (_imgObject$href = imgObject.href) !== null && _imgObject$href !== void 0 ? _imgObject$href : '/'
+        });
+      } else if ((_imgObject$theme3 = imgObject[theme]) !== null && _imgObject$theme3 !== void 0 && _imgObject$theme3.minimized) {
+        var _imgObject$otherTheme, _imgObject$otherTheme2, _imgObject$href2;
+        return {
+          full: (_imgObject$otherTheme = imgObject === null || imgObject === void 0 || (_imgObject$otherTheme2 = imgObject.otherTheme) === null || _imgObject$otherTheme2 === void 0 ? void 0 : _imgObject$otherTheme2.full) !== null && _imgObject$otherTheme !== void 0 ? _imgObject$otherTheme : this.defaultBrandImage.full,
+          minimized: imgObject[theme].minimized,
+          href: (_imgObject$href2 = imgObject === null || imgObject === void 0 ? void 0 : imgObject.href) !== null && _imgObject$href2 !== void 0 ? _imgObject$href2 : '/'
+        };
+      } else if ((_imgObject$theme4 = imgObject[theme]) !== null && _imgObject$theme4 !== void 0 && _imgObject$theme4.full) {
+        var _imgObject$otherTheme3, _imgObject$otherTheme4, _imgObject$href3;
+        return {
+          full: imgObject[theme].full,
+          minimized: (_imgObject$otherTheme3 = imgObject === null || imgObject === void 0 || (_imgObject$otherTheme4 = imgObject.otherTheme) === null || _imgObject$otherTheme4 === void 0 ? void 0 : _imgObject$otherTheme4.minimized) !== null && _imgObject$otherTheme3 !== void 0 ? _imgObject$otherTheme3 : this.defaultBrandImage.minimized,
+          href: (_imgObject$href3 = imgObject === null || imgObject === void 0 ? void 0 : imgObject.href) !== null && _imgObject$href3 !== void 0 ? _imgObject$href3 : '/'
+        };
+      } else {
+        var _imgObject$href4;
+        return _objectSpread(_objectSpread({}, this.defaultBrandImage), {}, {
+          href: (_imgObject$href4 = imgObject.href) !== null && _imgObject$href4 !== void 0 ? _imgObject$href4 : '/'
+        });
+      }
+    }
+
+    // method getLogo returns correct brandImage object to be displayed on the front end based on theme and type (sidebbar logo or main logo)
+  }, {
+    key: "getLogo",
+    value: function getLogo(theme, type) {
+      if (type === 'sidebarLogo' && theme && this.sidebarLogo) {
+        if (this.sidebarLogo[theme]) {
+          return this.sidebarLogo[theme];
+        } else if (!this.sidebarLogo[theme]) {
+          return this.sidebarLogo[theme === 'dark' ? 'light' : 'dark'];
+        }
+      }
+      /* if we have theme and we've managed to obtain appropriate branding from Config's get method. (this method checks if remote,
+      local or default configurations were set up (respectively) and returns the first one it comes across) Then, the `_determineSources`
+      method comes to play.  */
+      if (theme && this.brandImage) {
+        return this._determineSources(this.brandImage, theme);
+      } else {
+        return this.defaultBrandImage;
+      }
+    }
+  }]);
+}(_asab_webui_components.Service);

package/dist/services/HeaderService.js

@@ -0,0 +1,84 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _asab_webui_components = require("asab_webui_components");
+var _actions = require("../actions");
+function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+var HeaderService = exports["default"] = /*#__PURE__*/function (_Service) {
+  /*
+  Header service expects `header-logo-full.svg` and `header-logo-minimized.svg` SVG images
+  in `/public/media/logo/` directory:
+  	 * `header-logo-full.svg` dimensions: 150 x 50 pixels
+   * `header-logo-minimized.svg` dimensions: 50 x 50 pixels
+  */
+
+  function HeaderService(app) {
+    var _this;
+    var serviceName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "HeaderService";
+    (0, _classCallCheck2["default"])(this, HeaderService);
+    _this = _callSuper(this, HeaderService, [app, serviceName]);
+    _this.Items = [];
+    return _this;
+  }
+  (0, _inherits2["default"])(HeaderService, _Service);
+  return (0, _createClass2["default"])(HeaderService, [{
+    key: "initialize",
+    value: function initialize() {
+      this.App.ConfigService.addDefaults({
+        'defaultBrandImage': {
+          full: "media/logo/header-logo-full.svg",
+          minimized: "media/logo/header-logo-minimized.svg",
+          href: undefined
+        }
+      }, true);
+    }
+
+    /*
+    Adding items to the header can be done by using addComponent:
+    		const headerService = app.locateService("HeaderService");
+    	headerService.addComponent({
+    		component: NavLink,
+    		componentProps: {children: "My redirect button", href: "#/redirect", style: {marginRight: "2rem"}},
+    		order: 900
+    	});
+    	*/
+  }, {
+    key: "addComponent",
+    value: function addComponent(component) {
+      this.Items.push({
+        'component': component.component,
+        'componentProps': component.componentProps,
+        'order': component.order,
+        'fullscreenVisible': component.fullscreenVisible
+      });
+      this.App.Store.dispatch({
+        type: _actions.SET_HEADER_NAVIGATION_ITEMS,
+        headerNavItems: this.Items
+      });
+    }
+
+    // This function removes a component from the Header
+  }, {
+    key: "removeComponent",
+    value: function removeComponent(component) {
+      var filteredItems = this.Items.filter(function (item) {
+        return item.component !== component;
+      });
+      this.Items = filteredItems;
+      this.App.Store.dispatch({
+        type: _actions.SET_HEADER_NAVIGATION_ITEMS,
+        headerNavItems: this.Items
+      });
+    }
+  }]);
+}(_asab_webui_components.Service);

package/dist/services/ReduxService.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var ReduxService = exports["default"] = /*#__PURE__*/function () {
+  function ReduxService() {
+    (0, _classCallCheck2["default"])(this, ReduxService);
+    this.Reducers = {};
+  }
+  return (0, _createClass2["default"])(ReduxService, [{
+    key: "addReducer",
+    value: function addReducer(name, reducer) {
+      if (name in this.Reducers) {
+        console.warn("Reducer with name ".concat(name, " already exists."));
+        return;
+      }
+      this.Reducers[name] = reducer;
+    }
+  }]);
+}();

package/dist/services/TitleService.js

@@ -0,0 +1,45 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _asab_webui_components = require("asab_webui_components");
+var _actions = require("../actions");
+function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+var TitleService = exports["default"] = /*#__PURE__*/function (_Service) {
+  function TitleService(app) {
+    var _this;
+    var serviceName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "TitleService";
+    (0, _classCallCheck2["default"])(this, TitleService);
+    _this = _callSuper(this, TitleService, [app, serviceName]);
+    // Method for setting the subtitle
+    (0, _defineProperty2["default"])(_this, "setSubtitle", function (subtitle) {
+      _this._updateSubtitle(subtitle);
+    });
+    // Method for clearing the subtitle
+    (0, _defineProperty2["default"])(_this, "clearSubtitle", function () {
+      _this._updateSubtitle(undefined);
+    });
+    // Method for dispatching subtitle update to Redux store
+    (0, _defineProperty2["default"])(_this, "_updateSubtitle", function (subtitle) {
+      _this.App.Store.dispatch({
+        type: _actions.SET_SUBTITLE,
+        subtitle: subtitle
+      });
+    });
+    _this.App = app;
+    return _this;
+  }
+  (0, _inherits2["default"])(TitleService, _Service);
+  return (0, _createClass2["default"])(TitleService);
+}(_asab_webui_components.Service);

package/dist/theme/ThemeButton.js

@@ -0,0 +1,39 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactRedux = require("react-redux");
+var _reactI18next = require("react-i18next");
+var _reactstrap = require("reactstrap");
+var _actions = require("./actions");
+var ThemeButton = function ThemeButton(_ref) {
+  var theme = _ref.theme;
+  var _useTranslation = (0, _reactI18next.useTranslation)(),
+    t = _useTranslation.t,
+    i18n = _useTranslation.i18n;
+  var dispatch = (0, _reactRedux.useDispatch)();
+  var changeTheme = function changeTheme() {
+    var newTheme = theme == "light" ? "dark" : "light";
+    dispatch({
+      type: _actions.CHANGE_THEME,
+      theme: newTheme
+    });
+  };
+  return /*#__PURE__*/_react["default"].createElement(_reactstrap.NavLink, {
+    onClick: changeTheme,
+    title: t("General|Change theme"),
+    href: "#"
+  }, /*#__PURE__*/_react["default"].createElement("i", {
+    className: "bi bi-circle-half"
+  }));
+};
+function mapStateToProps(state) {
+  return {
+    theme: state.theme
+  };
+}
+var _default = exports["default"] = (0, _reactRedux.connect)(mapStateToProps)(ThemeButton);

package/dist/theme/ThemeReducer.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = ThemeReducer;
+var _actions = require("./actions");
+var themeInitState = null;
+function ThemeReducer() {
+  var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : themeInitState;
+  var action = arguments.length > 1 ? arguments[1] : undefined;
+  switch (action.type) {
+    case _actions.CHANGE_THEME:
+      var root = document.querySelector(':root');
+      root.dataset.bsTheme = action.theme; // Set the theme for Bootstrap `data-bs-theme`
+      return action.theme;
+    default:
+      return state;
+  }
+}

package/dist/theme/ThemeService.js

@@ -0,0 +1,52 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _asab_webui_components = require("asab_webui_components");
+var _ThemeReducer = _interopRequireDefault(require("./ThemeReducer"));
+var _actions = require("./actions");
+var _ThemeButton = _interopRequireDefault(require("./ThemeButton"));
+function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+var ThemeService = exports["default"] = /*#__PURE__*/function (_Service) {
+  function ThemeService(app) {
+    var _this;
+    var serviceName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "ThemeService";
+    (0, _classCallCheck2["default"])(this, ThemeService);
+    _this = _callSuper(this, ThemeService, [app, serviceName]);
+    app.ReduxService.addReducer("theme", _ThemeReducer["default"]);
+    return _this;
+  }
+  (0, _inherits2["default"])(ThemeService, _Service);
+  return (0, _createClass2["default"])(ThemeService, [{
+    key: "initialize",
+    value: function initialize() {
+      var headerService = this.App.locateService("HeaderService");
+      headerService.addComponent({
+        component: _ThemeButton["default"],
+        order: 400,
+        fullscreenVisible: true
+      });
+      // Detect initial theme (based on color-scheme aka user prefered theme)
+      // Doesn't work in Chromiuim in Ubuntu
+      // more info https://bugs.chromium.org/p/chromium/issues/detail?id=998903
+      var prefersColorScheme = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? "dark" : "light";
+
+      // Dispatch tenants obtained from userinfo
+      this.App.Store.dispatch({
+        type: _actions.CHANGE_THEME,
+        theme: prefersColorScheme
+      });
+
+      // TODO: Add listener to the system theme and change light/dark based on that
+    }
+  }]);
+}(_asab_webui_components.Service);

package/dist/theme/actions.js

@@ -0,0 +1,7 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CHANGE_THEME = void 0;
+var CHANGE_THEME = exports.CHANGE_THEME = "asab/changeTheme";

package/package.json

@@ -0,0 +1,41 @@
+{
+	"name": "asab_webui_shell",
+	"version": "25.1.1",
+	"description": "TeskaLabs ASAB WebUI Shell Application",
+	"main": "dist/index.js",
+	"files": [
+		"dist"
+	],
+	"publishConfig": {
+	    "registry": "https://registry.npmjs.org/"
+	 },
+	"scripts": {
+		"clean": "rimraf dist",
+		"build": "babel src --extensions '.js,.jsx' --out-dir dist && copyfiles -u 1 'src/**/*.{scss,jsx}' dist"
+	},
+	"devDependencies": {
+		"@babel/cli": "^7.22.11",
+		"@babel/core": "^7.22.11",
+		"@babel/plugin-transform-runtime": "^7.22.10",
+		"@babel/preset-env": "^7.22.10",
+		"@babel/preset-react": "^7.22.5",
+		"babel-plugin-module-resolver": "^5.0.2",
+		"copyfiles": "^2.4.1",
+		"rimraf": "^5.0.0",
+		"i18next-browser-languagedetector": "^6.1.2"
+	},
+	"peerDependencies": {
+		"asab_webui_components": "git+https://github.com/TeskaLabs/asab-webui-components-lib.git#main",
+		"@babel/runtime": "^7.22.11",
+		"react": "^17.0.0",
+		"react-dom": "^17.0.0",
+		"axios": "^0.21.1",
+		"i18next": "^20.3.5",
+		"react-i18next": "^11.8.12",
+		"react-redux": "^7.2.0",
+		"react-router": "^6.16.0",
+		"react-router-dom": "^6.16.0",
+		"reactstrap": "^9.2.0",
+		"redux": "^4.0.5"
+	}
+}